Isolated scope value is not changing on click

Question

I have a simple example where I want to show the word "Peter" by directive templating. When a person makes a click on div - the name changes to "Juliet". However I am finding no error and nothing visible on screen.

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <people name="peter"></people>
    <people name="peter"></people>
    <script>
        //app declaration
        var app = angular.module('myApp', []);
        //controller declaration
        app.controller('myCtrl', function($scope) {
          //code goes here ... 
        });
        //directive declaration
        app.directive('people', function() {
          return {
            restrict: 'E',
            scope: {name:'='},
            template: '<div ng-click="name = \'Juliet\'">{{name}}</div>',
          }
        });
    </script> 
</body> 
</html>

score 3 · Answer 1 · answered May 03 '16 at 06:55

3

This is happening because angular evaluate "peter" as an expression, i.e, a variable name that he can't resolve. if you want to pass a string, just put '' around it

answered May 03 '16 at 06:55

Kobi Cohen

678
4
9

score 1 · Answer 2 · edited May 23 '17 at 10:30

Yep I found out a bit. Actually,

1) first, I should have used '@' instead of '=', as I wanted the directives to be separated from each other and on click of one should not have effected the value shown by another directive.

2) Second, I should have used model (here $scope.fname) to show the values in directives instead of strings. (as said by Kobi Chen)

2) Thirdly, I should have wrapped the fname in expressions in view in mustache tags.

The complete code is as given:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <people name="{{fname}}"></people>
    <people name="{{fname}}"></people>
    <script>
        //app declaration
        var app = angular.module('myApp', []);
        //controller declaration
        app.controller('myCtrl', function($scope) {
          $scope.fname = "Peter";
        });
        //5 directive declaration
        app.directive('people', function() {
          return {
            restrict: 'E',
            scope: {name:'@'},
            template: '<div ng-click="name = \'Juliet\'">{{name}}</div>',
           }
        });
    </script> 
</body> 
</html>

Also, took help from here:

What is the difference between '@' and '=' in directive scope in AngularJS?

score 0 · Answer 3 · answered May 03 '16 at 23:25

Because peter is a variable if you use scope with "=", so you have to set some values to that variable inside your controller like

app.controller('myCtrl', function($scope) {
  //code goes here ... 
  $scope.peter = 'John';
});

Then you will see something.Peter variable had not value that's why you didn't see anything and couldn't click on it to change to 'Juliet'

Isolated scope value is not changing on click

3 Answers3