Question

我正在尝试在指令范围内设置变量：

HTML：

<div personalize-product>
        Owned: {{ isOwned }}    
</div>

咖啡：

angular.module('yoApp').directive 'personalizeProduct', ->
    restrict: 'A'
    link: (scope, el, attrs) ->
        scope.isOwned = 'maybe'

然而它不起作用。我显然遗漏了一些东西，但我无法在角文档中找到答案。

编辑：我应该提到 - 我不想将isOwned传递给指令，我希望指令负责设置它。

Answer 1

以下是工作代码：

HTML：

  <body ng-app="yoApp">
    <div personalize-product product-id="6">
    </div>

    <div personalize-product product-id="8">
    </div>
  </body>

JS：

angular.module('yoApp', [])
  .directive('personalizeProduct', function() {
    return {
      restrict: 'A',
      scope: {},
      link: function(scope, el, attrs) {
        scope.isOwned = attrs.productId;
      },
      template: '<div>{{isOwned}}</div>'
    }
  })

Answer 2

您的代码中存在一些缺陷。

首先，您可以使用属性填充指令的范围：

<div personalize-product is-owned="isOwned">

其次，在你的指令中你需要声明绑定（你可以使用不同类型的绑定 - 详细了解docs）：

angular.module('yoApp').directive 'personalizeProduct', ->
  restrict: 'A'
  scope: { isOwned: '=' }
  controller: (scope) ->
    scope.isOwned = 'maybe'

更新（根据添加的评论）

如果您只想为指令设置一个独立的范围（但不要从父范围传递任何内容），请为范围声明一个空对象：

scope: { }

Answer 3

如果要创建一个用于保存指令的模块，则需要指定其依赖项，即无（请注意新数组）。

angular.module('yoApp', []).directive 'personalizeProduct', ->
    restrict: 'A'
    link: ($scope) ->
        $scope.isOwned = 'maybe'

Plunker

请参阅Developer Guide / Modules中的创建与检索。

AngularJS：指令范围

3 个答案: