Question

我正在尝试创建一个获取属性的简单指令，并在指令

中显示它

这是指令男女同志：

angular.module('JJJ')
  .directive('jobCard', function () {
    return {
      template: '<div>name: {{job}}</div>',
      restrict: 'E',
      scope:{
        job: "=j"
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  });

html用法：

<job-card ng-repeat="j in jobs" job="j.name"></job-card>

指令没有显示任何内容。那是为什么？

Answer 1

通过将范围变量job定义为=j，您告诉Angular要查找名为j的属性。

隔离范围的工作原理是在隔离范围（ex job）中定义属性的名称，然后将其设置为绑定设置（例如=是双向的）。为了命名属性，您可以将属性的名称附加到绑定设置的末尾（例如=myAttribute将查找名为myAttribute的属性，并在指令的scope属性上设置值job）。

angular.module('JJJ')
  .directive('jobCard', function () {
    return {
      template: '<div>name: {{job}}</div>',
      restrict: 'E',
      scope:{
        job: "="
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  });

Answer 2

当您编写这样的隔离范围时：

scope: {
  job: "=j"
}

这意味着用属性j引用的外部范围变量设置为双向数据绑定到内部范围变量job。

您应该这样写：

angular.module('JJJ')
  .directive('jobCard', function () {
    return {
      template: '<div>name: {{job}}</div>',
      scope:{
        job: "="
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  });

Answer 3

如果只想显示外部作用域中的值（例如，此指令位于控制器中且作业用于控制器中），请在指令的作用域对象中使用“@”而不是“=”。正如llan所指出的，'='是一种双向绑定，如果在指令范围内更改了值，则更新外部作用域中的值。例如，在您的示例中，更改link函数中job的值也将更改外部作用域（在控制器中）中的作业。

指令的模板在隔离时不访问范围

3 个答案:

当您编写这样的隔离范围时：

您应该这样写：