在angular指令中继承父级的新范围

Question

假设我这样做:

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 - 设置本地范围属性与通过attr属性的值定义的name的父范围属性之间的双向绑定.如果未指定attr名称,则假定属性名称与本地名称相同.范围的给定和窗口小部件定义:{localModel:'= myAttr'},然后窗口小部件范围属性localModel将反映父范围上的parentModel的值.对parentModel的任何更改都将反映在localModel中,localModel中的任何更改都将反映在parentModel中.

但是在那种情况下,因为"localModel中的任何更改都将反映在parentModel中",如果我在该指令的范围内修改变量,然后在那种情况下执行scope.apply(),它将相应地反映在父范围和父模板中将随更改一起更新

我还尝试将"scope:true"作为参数,但更改为范围后面的范围.$ apply(); 也会传播到原来的范围......

有没有办法使它能够从父作用域复制作用域,并且该作用域中的变量仍然没有传播到父作用域？

Answer 1

如何使该指令的范围从父范围继承变量,但仍然将其作为"隔离"范围

在这里使用"继承"这个词有点令人困惑.隔离范围不(原型)从其父范围继承.Angular确实$parent在隔离范围上放置了一个属性,因此您可以通过这种方式访问​​父作用域属性,但最佳做法是不使用$parent.如果你想要一个分离的范围,只有这样,才能通过父作用域属性值成隔离范围使用=,@或&.所有这三个实际上都可以工作(甚至'&'可以用来通过表达式传递属性值 - 对于好奇的人来说).

在隔离范围(或使用scope: true)上,您可以创建新属性.这些新属性不会传播回父级.因此,如果要更改传递给指令的属性值,只需将其复制到指令范围内的某个新属性即可.

这是一个使用@"单向字符串"语法的示例.要获取父作用域属性的(插值)值(作为字符串),请在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();
     });
    }