javascript - 在 Angular Directive(指令)中从父级继承的新范围

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 文档:

= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel.

但是在那种情况下，因为“localModel 中的任何更改都将反射(reflect)在 parentModel 中”，如果我在该指令的范围内修改变量然后在这种情况下执行 scope.apply() ，它将相应地反射(reflect)在父范围中并且父模板将随着更改而更新

我还尝试将“scope : true”作为参数，但更改了范围，然后是范围。$apply();也将传播到原始范围...

有没有办法让我可以从父作用域复制一个作用域，并且该作用域中的变量更改仍然不会传播到父作用域？

Answer 1

how can I make the scope of this directive inherit a variable from the parent scope and yet still have it to be an 'isolate' scope

这里用“继承”这个词有点让人迷惑。隔离作用域不会(原型(prototype)上)从其父作用域继承。 Angular 确实在隔离作用域上放置了一个 $parent 属性，因此您可以通过这种方式访问​​父作用域属性，但最佳做法是不要使用 $parent。如果您想要一个隔离范围，将父范围属性值传递到该隔离范围的唯一方法是使用 =、@ 或 & .这三个实际上都可以工作(甚至 '&' 也可以用于通过表达式传递属性值 – for the curious )。

在您的隔离作用域(或者如果您使用 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();
     });
    }