Новая область, которая наследует от родителя в директивах angular

Предположим, что я делаю это:

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: {
      someVar : '='
    },
    link : function(scope, element, attrs){  
      element.click(function(){
           //do stuff
        scope.someVar = 'somethingelse';
        var dropdownOutput = template();
        var compiledOutput = $compile(dropdownOutput)(scope);
        scope.$apply();
     });
    }    
  }
}]);

как я могу сделать область действия этой директивы наследовать переменную из родительской области и все же иметь ее как область выделения?

например, из angular docs:

= or = attr - устанавливает двунаправленную привязку между локальным свойством scope и свойством родительской области имени, определяемым через значение атрибута attr. Если имя attr не указано, атрибут Предполагается, что имя совпадает с именем локального. Определенное и видимое определение области: { localModel: '= myAttr'}, то свойство scope widget localModel будет отражают значение parentModel в родительской области. Любые изменения в parentModel будет отображаться в localModel и любые изменения в localModel будет отображаться в parentModel.

однако в этом случае, поскольку "любые изменения в localModel будут отображаться в parentModel", если я изменяю переменную в области действия этой директивы, а затем делаю scope.apply(), в этом случае она будет отражать в родительской области соответственно и родительский шаблон будет обновлен с изменениями

Я также попытался сделать "scope: true" в качестве параметра, но изменил область действия, за которой следует область. $apply(); также будет распространяться в исходный объем...

Есть ли способ сделать это так, чтобы я мог скопировать область из родительской области и все еще иметь изменения в переменных в этой области, которые не распространяются на родительскую область?

Ответы

Ответ 1

как я могу сделать область действия этой директивы наследовать переменную из родительской области и все же иметь ее как область выделения?

Использование слова "inherit" здесь немного запутанно. Область изоляции не (прототипно) наследуется от родительской области. Angular помещает свойство $parent в область изоляции, поэтому вы можете получить доступ к свойствам родительских областей таким образом, но лучше всего не использовать $parent. Если вы хотите выделить область выделения, единственный способ передать значения свойств родительской области в эту область выделения - использовать =, @ или &. Все три будут работать (даже "&" может использоваться для передачи значений свойств через выражение для любопытных).

В области выделения (или если вы используете scope: true), вы можете создавать новые свойства. Эти новые свойства не распространяются на родителя. Итак, если вы хотите изменить значение свойства, которое вы передали в директиву, вы можете просто скопировать его в какое-либо новое свойство в области директивы.

Вот пример использования @, синтаксиса "однонаправленная строка". Чтобы получить (интерполированное) значение свойства родительской области (в виде строки), используйте {{}} s в HTML:

<div class="dostuff" some-var="{{interpolateThisParentScopePropertyPlease}}">

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: { someVar : '@' },
    link : function(scope, element, attrs){  
      element.click(function(){
        scope.myLocalDirectiveProperty = scope.someVar;
        scope.someOtherDirectiveProperty = 'somethingelse';
        var dropdownOutput = template();
        var compiledOutput = $compile(dropdownOutput)(scope);
        scope.$apply();
     });
    }

Если вы хотите передать объект в директиву, используйте синтаксис '=', а затем используйте angular.copy(), чтобы сделать копию объекта внутри директивы.

В соответствии с запросом на комментарий:

<div class="dostuff" some-obj="parentScopeObj">

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: { someObj : '=' },
    link : function(scope, element, attrs){  
      element.click(function(){
        scope.myLocalDirectiveObjProperty = angular.copy(scope.someObj);
        ...
        scope.$apply();
     });
    }