Создание дочерних областей в AngularJS

0

У меня есть директива savingIndicator которой будут показаны завихрения, а затем сообщения об ошибках/ошибках. Он связывается с вещами, такими как 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 чтобы 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>
Теги:
angularjs-scope
angularjs-directive

2 ответа

1
Лучший ответ

Вам нужно добавить еще один параметр в определение директивы. Необходимый параметр называется "областью". Проверьте Угловую документацию уже объяснили. Если вы хотите немного поиграть, это плункер (из угловых документов):

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

http://plnkr.co/edit/XFy6IB0cdBTMglItIgWR.

Таким образом, вы указываете новую область действия директивы вместо использования контроллера.

Поделиться
  • 0
    Спасибо за это, в некоторых случаях у меня нет модели для передачи (т.е. я использую текущую область видимости), как мне передать текущую область, если у меня нет thingToSave . <saving-indicator saving-model> не работает
  • 0
    Извините, но я не следую за вами. Не могли бы вы немного объяснить или дать больше информации?
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.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню