Question

I'm adding the attribute ng-bind='data' to an element through a directive

myApp.directive('myDiv', function() {
    return {
        restrict: 'E',
        link: function($scope, element, attrs) {
            element.html('<div ng-bind="data">me</div>');
}   };  });
function MyCtrl($scope) {
    $('#click').click(function() {
        $scope.data = 'change';
}); }

but the ng-bind isn't working as expected.

http://jsfiddle.net/HB7LU/3427/

Was it helpful?

Solution

To answer the main question your issue here is that if you want to include bindings in your template you need to compile the element. The syntax for that is something like:

$compile(angular.element("my html"))(scope)

In your case that actually ends up looking like:

myApp.directive('myDiv', function($compile) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            // here adding the ng-bind dynamically
            element.html($compile(angular.element('<div ng-bind="data">me</div>'))(scope));
        }
    };
});

To see it working checkout the updated fiddle here: http://jsfiddle.net/CC8BK/.

One other note is you are using jQuery's "click" event to change scope values. When working with angular you need to start by trying not to use jQuery and instead using the angular directives for whatever you can. In your case ng-click is the directive you should be using. I inserted this in your html so you could see what it would look like.

Hope this puts you on the right track. Best of luck!

OTHER TIPS

As @drew_w said you have to compile element using $compile if you need to apply from link,

or else you can use template in directure like

template: '<div ng-bind="data"></div>'

I mostly prefer template

Also don't use jquery function like

 $('#click').click(function() {
        $scope.data = 'change';
});

instead you can use

  $scope.change = function()
    {
        $scope.data = 'change';
    }

or

ng-click="data = 'change'"  

as @drew_w said

Take a look the full code

Working demo

html

<div ng-controller="MyCtrl">Hello, {{name}}!
    <button id='click' ng-click="change()">click to 'change'</button>
    <my-div>watch, this doesn't change!!!???</my-div>
</div>

script

var myApp = angular.module('myApp', []);

myApp.directive('myDiv', function ($compile) {
   return {
            restrict: 'E',
            template:'<div ng-bind="data"></div>'
        };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.data = "me";
    $scope.name = 'Superhero';

    $scope.change = function () {
        $scope.data = 'change';
    }
});

here's a variation of the above answer using the Template property and using a click function:

    myApp.directive('myDiv', function() {

        return {
            restrict: 'E',
            template:'<div ng-bind="data"></div> me'
        };

    });

and on the controller:

    $scope.click = function() {

            $scope.data = 'change';
        };

and on the View

    <button ng-click="click()">click to 'change'</button>

http://jsfiddle.net/HB7LU/3446/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top