2015-10-03 2 views
3

Там это директива называется foo, которая определяется следующим образом:Добавление директивы сфера делает остальные не-обновляемыми

<div ng-app="app" ng-controller="mainController"> 
    {{ name }} 

    <foo param="123"></foo> 
</div> 

А вот соответствующий фрагмент инициализации:

var app = angular.module('app', []); 
app.controller('mainController', function($scope){ 
    $scope.name = 'Initial name'; 
}); 

app.directive('foo', function(){ 
    return { 
     restrict : 'E', 
     controller : function($scope){ 
      $scope.name = 'Name defined in directive'; 
      console.log($scope.param); // undefined 
     } 
    }; 
}); 

Это работает, как ожидалось, и переопределение Initial name с Name defined in directive.

Однако, поскольку есть атрибут param, я хотел получить доступ к его значению. Поэтому я сделал один способ привязки следующим образом:

return { 
     restrict : 'E', 
     controller : function($scope){ 
      $scope.name = 'Name defined in directive'; 
      console.log($scope.param); // 123 as expected 
     }, 
     scope : { 
      param : "@" 
     } 
    } 

И это сломало обновление родительской области. Теперь при запуске он отображает Initial name вместо ожидаемого Name defined in directive. Так в чем проблема?

ответ

1

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

Вам нужно будет либо добавить name в свой изолята объем и передать его в так же, как param или вам нужно будет удалить рамки и определить param на родительской области.

Вот что Angular docs должен сказать о изолят областях:

Как следует из названия, изолят сфера применения директивы изолирует все, кроме моделей, которые вы явно добавлены в область: {} хэш-объект , Это полезно при создании компонентов многократного использования, поскольку оно не позволяет компоненту изменять состояние модели, за исключением моделей, которые вы явно передаете.

Примечание: Обычно область прототипа наследуется от ее родителя. Изолированной области нет. Дополнительную информацию об изоляции областей см. В разделе «Область определения объекта - область действия».

+1

Двусторонняя привязка к 'name' будет недостаточной, так как это примитивный тип (строка). Это должно быть свойство типа 'model.name' или использовать привязку выражения' on-name-change = "name = newName" ' – floribon

+0

2-way binding работает отлично с строками. Демо: http://plnkr.co/edit/Mcid4CwXFoWXdxCu95ez?p=preview –

+0

Ой, похоже, что вы правы (даже при обновлении переменной из директивы). Я не знаю, почему у меня было предположение, что это не так, извините за вводящий в заблуждение комментарий. – floribon

Смежные вопросы