Question

我有一个自定义指令：myContent

'use strict';

angular.module('myModule').directive('myContent', function() {
  return {
    restrict: 'E',
    templateUrl: 'myContent.html',

    controller: function($scope){
      $scope.selectedContents = {
        priceOrTransactionOption : null,
        yearlyOrMonthly : 'Yearly',
        contentIndicator : null
      };
      $scope.comboContent = {
        priceOrTransactionOption : ['By Price Range', 'By Transactions'],
        yearlyOrMonthly : ['Yearly', 'Monthly'],
        contentIndicator : ['Active configuration', 'Next Configuration']
      };
    },
    controllerAs: 'myContentCtrl'
  };
});

我在多个地方使用同一个指令：

<div class="tab-content col-lg-10">
      <my-content></my-content>
</div>

<div class="tab-content col-lg-10">
     <my-content></my-content>
</div>

<div class="tab-content col-lg-10">
     <my-content></my-content>
</div>

我的指令html页面（myContent.html）有一些数据：

<div class="row no-left-padding">
    <div class="col-lg-3 no-left-padding">
        <select class="form-control" ng-model="selectedContent.priceOrTransactionOption"
                ng-options="keyOption as keyOption for keyOption in comboContent.priceOrTransactionOption">
        </select>
    </div>
    <div class="col-lg-3 no-left-padding">
        <select class="form-control" ng-model="selectedContent.yearlyOrMonthly" ng-disabled = "true"
                ng-options="interval as interval for interval in comboContent.yearlyOrMonthly">
        </select>
    </div>

    <div class="col-lg-3 no-left-padding">
        <select class="form-control" ng-model="selectedContent.contentIndicator"
                ng-options="indicator as indicator for indicator in comboContent.contentIndicator">
        </select>
    </div>
</div>

但我的问题是，当我在一个指令中更改模型时，它会反映在每个指令中。

如何使用相同的指令，并使用不同的模型进行映射？

我曾尝试将一个属性填充到我的自定义指令中：

<div class="tab-content col-lg-10">
      <my-content category="type1"></my-content>
</div>

<div class="tab-content col-lg-10">
     <my-content category="type2"></my-content>
</div>

<div class="tab-content col-lg-10">
     <my-content category="type3"></my-content>
</div>

但我仍然感到困惑，我应该在哪里映射获取孤立对象的类别。

Answer 1

您需要将Isolated scope添加到您的指令中。这有效地允许它拥有自己的一组属性：

angular.module('myModule').directive('myContent', function() {
  return {
    restrict: 'E',
    templateUrl: 'myContent.html',
    scope: { 
         category:'='
    },
    controller: function($scope){
      $scope.selectedContents = {
        priceOrTransactionOption : null,
        yearlyOrMonthly : 'Yearly',
        contentIndicator : null
      };
      $scope.comboContent = {
        priceOrTransactionOption : ['By Price Range', 'By Transactions'],
        yearlyOrMonthly : ['Yearly', 'Monthly'],
        contentIndicator : ['Active configuration', 'Next Configuration']
      };
    },
    controllerAs: 'myContentCtrl'
  };
});

然后您可以使用上面的示例：

<div class="tab-content col-lg-10">
      <my-content category="type1"></my-content>
</div>

每个人都会单独工作。

请注意，当您添加隔离范围绑定'='的属性时。有许多不同的类型，'@'，'='和'＆amp;'以及可选参数。 scope属性的命名使用snake case。而不是我给你一个完整的解释，请阅读Angular developers guide on isolated scope

Answer 2

尝试在指令定义中添加：

restrict: 'E',
scope: {},

Answer 3

您希望为指令的每个实例返回// Get articles of a user from his id Article.find({ author: 7 }).exec(function (err, result) { console.log(result.toJSON()); }); /* [ { title: 'The first article', id: 1, createdAt: Wed Jun 20 2015 14:12:33 GMT-0600 (CST) updatedAt: Wed Jun 20 2015 14:12:33 GMT-0600 (CST) }, { title: 'Another article', id: 2, createdAt: Wed Jun 21 2015 15:04:12 GMT-0600 (CST) updatedAt: Wed Jun 21 2015 15:04:12 GMT-0600 (CST) }, { title: 'I\'m back', id: 10, createdAt: Wed Jun 30 2015 13:25:45 GMT-0600 (CST) updatedAt: Wed Jun 30 2015 13:25:45 GMT-0600 (CST) } ] */。为此，您可以使用angular双向绑定在指令和页面内容之间创建链接。

selectedContents

现在，您可以将angular.module('myModule').directive('myContent', function() { return { restrict: 'E', templateUrl: 'myContent.html', scope: { selectedContents: '=' }, controller: function($scope){ $scope.selectedContents = { priceOrTransactionOption : null, yearlyOrMonthly : 'Yearly', contentIndicator : null }; ....作为指令的参数。

selectedContents

在可重复使用的角度指针中隔离范围

3 个答案: