15

假设我这样做：

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

如何使该指令的范围从父范围继承变量，但仍使其成为“隔离”范围

例如来自角度文档：

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

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

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

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

4

1 回答 1

12

如何使该指令的范围从父范围继承变量，但仍使其成为“隔离”范围

在这里使用“继承”这个词有点令人困惑。隔离范围不（典型地）从其父范围继承。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();
     });
    }
于 2013-04-07T03:05:32.723 回答