Question

我有一个简单的例子，我希望通过指令模板显示“Peter”这个词。当一个人点击div时 - 名称变为“Juliet”。但是，我发现没有错误，屏幕上没有任何可见信息。

<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>

Answer 1

这种情况正在发生，因为角度评估＆＃34; peter＆＃34;作为表达，即他无法解决的变量名。如果你想传递一个字符串，只需要输入＆＃39;＆＃39;围绕它

Answer 2

是的，我发现了一点。实际上，

1）首先，我应该使用'@'而不是'='，因为我希望指令彼此分开，并且点击一个指令不应该影响另一个指令所显示的值。

2）其次，我应该使用model（这里是$ scope.fname）来显示指令中的值而不是字符串。（正如Kobi Chen所说）

2）第三，我应该将胡扯标签中的fname包装在视图中。

完整的代码如下：

<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>

另外，从这里获得帮助：

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

Answer 3

如果您使用带有“=”的范围， peter 是一个变量，那么您必须在控制器中为该变量设置一些值，例如

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

然后你会看到一些东西。彼得变量没有重视这就是为什么你没有看到任何东西而无法点击它以改为'朱丽叶'

单击时，隔离范围值不会更改

3 个答案: