Question

有人可以解释一下这两段代码之间的区别，以及管理它的方法。

这是我的 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>

这是我的 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);

最后我的 my-customer-iso.html ：

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

结果如下：

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

问题是：我想用范围变量设置我的标记信息（基本上是$ scope.nameUser，其中包含“naomi”）。但是当我写作

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

而不是

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

代码坏了，我不明白为什么..范围变量是不是像字符串一样考虑？感谢

编辑：即使我写道：

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

结果仍然不同。我没有收到错误，但输出是：

Name: Address:
Name: Igor Address: 123 Somewhere

所以我认为我对控制器和指令之间的交互缺少了一些东西。见这里：https://plnkr.co/edit/hbi4whoH3Dj9lDV3vVzZ?p=preview

Answer 1

而不是<my-customer info={{nameUser}} </my-customer>只使用<my-customer info="nameUser" </my-customer>。您不需要{{ }}

更新：

我不太确定你想要实现的目标。在您的示例中，您尝试传递一个简单的字符串＆＃39; naomi＆＃39;，但您的指令需要一个具有以下结构的对象：

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

所以，如果你想让它工作，你应该让你的范围对象看起来像这样：

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

然后将其传递给指令，如下所示：

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

查看this plunker.

Answer 2

这里有一个重要的区别需要注意。在你的指令中你使用＆＃34; = info＆＃34;对于指令中的范围customerInfo属性赋值。 =表示按引用分配。因此，您无法使用{{}}，因为它是评估表达式。例如，如果您已经使用过

customerInfo: '@info'

你的代码可以正常工作。因为＆＃39; @＆＃39;将属性绑定到评估值。或者，只需从{{}}删除<my-customer info={{nameUser}} </my-customer>评估表达式为

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

此外，您收到的空输出是因为$scope.nameUser是一个字符串，但您希望指令中包含name和address属性的对象。

Answer 3

分配隔离范围时，传递的值（info =“naomi”）反映父范围的已分配属性。插补把手在这里不起作用。放下把手，留下'info =“nameUser”'就可以了。请记住，nameUser只是一个字符串，而naomi是一个对象。所以naomi.name产生了一个字符串，但nameUser.name不起作用。

使用angularjs在标记中使用范围变量

3 个答案: