Question

我有一个savingIndicator指令，它会显示一个spinny，然后显示成功/错误消息。它绑定到saving和message之类的内容，以向用户显示信息。该指令相当愚蠢，字面上只是加载一个模板

m.directive('savingIndicator', function () {
    return {
        restrict: 'E',
        templateUrl: '/templates/savingindicator'
    };
});

SavingIndicator.html（摘录）：

<span ng-show="saving">
    <img src="/Content/loader.gif" style="vertical-align: middle;" /> Saving...
</span>

在我当前的控制器中，我有许多需要保存的东西，所以我想将它们分开：

var thingToSave1 = {
    saving: false,
    message: ""
}
var thingToSave2 = {
    saving: false,
    message: ""
}

如何告诉savingIndicator不要在主要范围（控制器）上查找其变量，而是在其中一个对象中？在我的脑海里，它会像下面的东西一样工作，但它目前还没有工作

<input text="Save item 1" />
<saving-indicator ng-model="thingToSave1"></saving-indicator>
...
<input text="Save item 2" />
<saving-indicator ng-model="thingToSave2"></saving-indicator>

Answer 1

快速破解如下：

m.directive('savingIndicator', function () {
  return {
    restrict: 'E',
    templateUrl: '/templates/savingindicator',
    scope: {
      myModel: '='
    }
  };
});

//---------------

<span ng-show="myModel.saving">
  <img src="/Content/loader.gif" style="vertical-align: middle;" />Saving...
</span>

//---------------

<saving-indicator my-model="thingToSave1"></saving-indicator>

您可以在Angular docs中了解有关指令和隔离范围选项的更多信息。

Answer 2

您需要在指令的定义中添加另一个参数。您需要的参数称为“范围”。查看Angular的文档已在那里解释。如果你想玩一点，这是一个plunker（来自角度文档）：

...
return {
  restrict: 'E',
  scope: {
    customerInfo: '=info'
  },
  templateUrl: 'my-customer-iso.html'
};

http://plnkr.co/edit/XFy6IB0cdBTMglItIgWR

通过这种方式，您可以为指令指定新范围，而不是使用控制器。

在AngularJS中创建子范围

2 个答案: