Use scope variable in a markup using angularjs

Question

could someone please explain me the difference between these two piece of code, and the way to manage it.

Here is my index.html

<body ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
  <my-customer info="naomi" ></my-customer>
  {{nameUser}}
  <my-customer info="igor"></my-customer>
</div>
</body>

Here is my script.js

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.nameUser = 'naomi';
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html'
    };
  });
})(window.angular);

And finally my my-customer-iso.html :

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

The result is this :

Name: Naomi Address: 1600 Amphitheatre
naomi Name: Igor Address: 123 Somewhere

Question is : I would like to set the info of my markup with a scope variable (basically $scope.nameUser which contains "naomi"). But when I write

<my-customer info={{nameUser}} </my-customer> // or <my-customer info="{{nameUser}}"> </my-customer>

instead of

<my-customer info= "naomi"></my-customer>

the code is broken and I don't understand why.. Is the scope variable can't be consider like a string ? Thanks

EDIT : Even if I write :

<my-customer info = nameUser> </my-customer>

The result is still different. I don't receive an error but the output is :

Name: Address:
Name: Igor Address: 123 Somewhere

So I think that I'm missing something about the interaction between the controller and the directive. See here : https://plnkr.co/edit/hbi4whoH3Dj9lDV3vVzZ?p=preview

Arthur S. · Accepted Answer · 2016-05-03 14:52:40Z

2

Instead of <my-customer info={{nameUser}} </my-customer> just use <my-customer info="nameUser" </my-customer>. You don't need the {{ }}

UPDATE:

I'm not quite sure what you are trying to achieve. In your example, you are trying to pass a simple string 'naomi', but your directive expects an object with the following structure:

customerInfo = {
   name: "",
   address: ""
};

So, if you want to have it working, you should make your scope object look like this:

$scope.nameUser = { name: 'XXX', address: 'YYY' };

and then pass it to the directive like so:

<my-customer info="nameUser" ></my-customer>

Take a look at this plunker.

edited May 3, 2016 at 14:52

answered May 3, 2016 at 13:42

Arthur S.

2022 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jibeee Over a year ago

Thank you for your answer but it doesn't work. I don't receive an error, but the result is "Name: Address:"

Arthur S. Over a year ago

I've updated my answer, could please please clarify this for me?

Jibeee Over a year ago

Ok I understand my mistake now. I thought "naomi" were a string that refers to $scope.naomi and not the object itself. Thank you for your explanation

Arthur S. Over a year ago

I'm glad I was able to help you :)

Andrej Burcev · Accepted Answer · 2016-05-03 14:37:16Z

There is an important difference here to note. In your directive you use "=info" for scope customerInfo attribute assignment in your directive. The = means assignment by reference. Therefore you cannot use {{}} as it is an evaluation expression. So for example, if you have used

customerInfo: '@info'

your code would work fine. Because '@' binds property to the evaluated value instead. Or, otherwise, just remove {{}} evaluation expression from <my-customer info={{nameUser}} </my-customer> to be

<my-customer info="nameUser"> </my-customer>

In addition, the empty output you receive, is because $scope.nameUser is a string, but you are expecting an object with name and address attributes in your directive.

Ok I understand my mistake now. I thought "naomi" were a string that refers to $scope.naomi and not the object itself. Thank you for your explanation

Eric N · Accepted Answer · 2016-05-03 14:26:36Z

0

When assigning isolated scopes, the value passed (info="naomi") reflects an assigned property of the parent scope. The interpolation handlebars will not work here. Drop off the handlebars, leaving 'info="nameUser"' should do the trick. Just remember that nameUser is just a string while naomi was an object. So naomi.name yielded a string but nameUser.name doesn't work.

edited May 3, 2016 at 14:26

answered May 3, 2016 at 13:47

Eric N

2,22616 silver badges13 bronze badges

1 Comment

Jibeee Over a year ago

Thank you for your answer. If I'm right, the property "nameUser" comes from the parent scope . So how can I solve this ?

Collectives™ on Stack Overflow

Use scope variable in a markup using angularjs

3 Answers 3

4 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Related