Question

我必须遗漏一些东西，但我无法弄清楚为什么这条指令没有出现，是否有人可以提供帮助？

<body ng-controller="MainCtrl">
<p>Test is <b>{{name}}</b> with myValue <b>{{myValue}}</b></p>
<my-new-directive my-test="{{myValue}}"></my-new-directive>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.myValue = true;
});


app.directive('myNewDirective', function() {
return {
 restrict: 'E',
 replace: true,
 link: function(scope, element, attrs) {
    attrs.$observe('myTest', function() {
    scope.name = attrs.myTest;
    if (!attrs.myTest) {
      this.template = '<div>FALSE</div>';
    } else {
      this.template = '<div>TRUE</div>';
    }
    scope.$apply();
  });
}
};
});

http://embed.plnkr.co/zijm24/preview

Answer 1

您不应该从链接功能返回模板。

你可以这样做：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.myValue = true;
});


app.directive('myNewDirective', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div>{{val}}</div>',
      link: function(scope, element, attrs) {
        attrs.$observe('myTest', function() {
          scope.name = attrs.myTest;
          if (!angular.fromJson(attrs.myTest)) {
            scope.val= 'FALSE';
          } else {
            scope.val= 'TRUE';
          }
          scope.$apply();
        });
      }
    };
  });

Answer 2

我会将此缩减为此代码：

<body ng-controller="MainCtrl">
    <p>Test is <b>{{name}}</b> with myValue <b>{{myValue}}</b></p>
    <label><input type="checkbox" ng-model="myValue"> myValue</label>
    <my-new-directive my-test="myValue"></my-new-directive>
</body>

请注意，在上面的HTML中，my-test直接接收模型，而不是表达式。另外，我添加了一个包含复选框的演示，以便您可以切换值。

然后，JS看起来像你需要的那样：

app.directive('myNewDirective', function() {
    return {
        restrict: 'E',
        scope: {
            name: '=myTest'
        },
        template: '<div>{{ name }}</div>'
    };
});

所以基本上，我删除了transclusion，因为你没有使用它（如果需要的话重新添加）并引入了一个双向绑定隔离范围，而不是手动添加逻辑来观察父范围模型的值。这使您可以完全摆脱链接功能 - 至少在您需要添加额外功能之前。

Angular指令不使用此代码

2 个答案: