Question

我想编写一个AngularJS指令并将范围属性（控制器范围）绑定到模板元素。我的指令有一个隔离范围。它不起作用。有人可以帮助我吗？

此致艾格尼丝。

以下是我的代码：

JavaScript的：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.val = "Helena Parker";
});

app.directive("helloWorld", function() {
  return {
    restrict: "E",
    scope: {
      name: "@",
      val: "@"
    },
    template: "<div>a {{name}} a</div>",

    link: function linkFn(scope, lElement, attrs) {
          scope.$watch(attrs.name2, function(value) {
             lElement.text(lElement.text() + 'b ' + value + ' b');
          });
    }
  };
});

HTML

＆LT; hello-world name =“John Smith”name2 =“val”＆gt;

结果是： 约翰史密斯ab undefined b

预期结果是： 约翰史密斯ab Helena Parker b

Answer 1

如果您想观看属性

scope.$watch(function() { return attrs.name2}, function(value) {
    lElement.text(lElement.text() + 'b ' + value + ' b');
});

但是最好的方法是用双向混合来绑定它。

scope: {
  name: "@",
  val: "@"
  name2: "=?"
}

然后

scope.$watch('name2', function(value) {
    lElement.text(lElement.text() + 'b ' + value + ' b');
});

Answer 2

我已经做到了，得到了我想要的东西（John Smith ab Helena Parker b）。

<强> JavaScript的：

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

app.controller('MainCtrl', function($scope) {
  $scope.val = "Helena Parker";
});

app.directive("helloWorld", function() {
  return {
    restrict: "E",
    scope: {
      name: "@",
      val: "="
    },
    template: "<div>a {{name}} ab {{val}} b</div>"
  };
});

<强> HTML

＆LT; hello-world name =“John Smith”val =“val”＆gt;

Answer 3

对于值，您应该在范围对象中使用“=”而不是“@”。此外，为您的范围定义“name2”而不是val。或者将val链接到name2属性，我不明白为什么你在val上使用$ watch，数据绑定就是这样做的，所以这样做

app.directive("helloWorld", function() {
 return {
   restrict: "E",
   scope: {
     name: "=",
     val: "=name2"
   },
   template: "<div>a {{name}} a b {{val}} b </div>",
   link: function linkFn(scope, lElement, attrs) {

    }
 };
});

AngularJS：指令中的隔离范围

3 个答案: