javascript 在角度指令中从父级继承的新范围

new scope that inherits from parent within angular directives

提问by pillarOfLight

suppose I do this:

假设我这样做：

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();
     });
    }    
  }
}]);

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

我怎样才能让这个指令的作用域从父作用域继承一个变量，但仍然让它成为一个“隔离”作用域

for instance from angular docs:

例如来自angular docs：

= 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.

= 或 =attr - 在本地范围属性和通过 attr 属性值定义的 name 的父范围属性之间设置双向绑定。如果未指定属性名称，则假定属性名称与本地名称相同。给定范围和小部件定义：{ localModel:'=myAttr' }，那么小部件范围属性 localModel 将反映父范围上 parentModel 的值。parentModel 的任何更改都将反映在 localModel 中，localModel 中的任何更改都将反映在 parentModel 中。

however in that case since "any changes in localModel will reflect in parentModel" if I modify a variable in the scope in that directive and then do scope.apply() in that case, it will reflect in the parent scope accordingly and the parent template will be updated with the changes

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

I also tried doing "scope : true" as a parameter but changes to the scope there followed by the scope.$apply(); will also propagate to the original scope...

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

Is there a way to make it so that I can copy a scope from the parent scope and still have changes in the variables in that scope not propagate to the parent scope?

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

采纳答案by Mark Rajcok

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

我怎样才能让这个指令的作用域从父作用域继承一个变量，但仍然让它成为一个“隔离”作用域

Using the word "inherit" here is a bit confusing. An isolate scope does not (prototypically) inherit from its parent scope. Angular does put a $parentproperty on the isolate scope, so you could access parent scope properties that way, but best practice is to not use $parent. If you want an isolate scope, the only way to pass parent scope property values into that isolate scope is to use =, @, or &. All three will actually work (even '&' could be used to pass property values via an expression – for the curious).

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

On your isolate scope (or if you use scope: true), you can create new properties. These new properties will not propagate back to the parent. So, if you want to alter a property value that you passed into the directive, you can simply copy it to some new property on the directive's scope.

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

Here's an example using @, the "one-way string" syntax. To get the (interpolated) value of your parent scope property (as a string), use {{}}s in the HTML:

这是一个使用@“单向字符串”语法的示例。要获取父作用域属性的（内插）值（作为字符串），请在 HTML 中使用 {{}}s：

<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();
     });
    }

If you want to pass an object to the directive, use the '=' syntax, and then use angular.copy()to make a copy of the object inside the directive.

如果要将对象传递给指令，请使用 '=' 语法，然后使用angular.copy()在指令内制作对象的副本。

---

---

As per the comment request:

根据评论请求：

<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();
     });
    }