Does dynamically adding ng-bind directive not work?

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/

Answer 1

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!

Answer 2

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';
    }
});