在Angular中使用$parent是一个好的实践吗？

Question

我是Angular世界的新手，想知道在访问父级作用域时是否使用$parent全局变量是一个好的实践。例如，data-ng-if创建一个隔离作用域，这会导致有时无法访问父作用域，所以唯一的方法就是使用$parent.myVariable。

任何示例、任何建议，以确保我的代码清晰并遵循良好的实践，将不胜感激。

- Mathemagician

---

ng-if 不会创建隔离作用域，而是创建一个继承作用域。 - georgeawg

Answer 1

这不是一个好的做法，会给你带来麻烦。比如说你有一个绑定到控制器上的 <div> 和一个 <div ng-if>，你决定在你的

中使用 {{ $parent.myVariable }}。如果你需要嵌套另一个 ng-if 或移除唯一的 ng-if，会发生什么？

我建议你将变量保存在存储在控制器 $scope 变量中的对象中。

因此，您应该在控制器中拥有以下内容。

$scope.MyValues = {};
$scope.MyValues.myVariable = 5;

现在你可以避免在<div>中使用$parent，并安全地查找{{ MyValues.myVariable }}，angular将通过$parent回溯，直到找到MyValues对象，因此您几乎可以忘记ng-if作用域问题。嵌套控制器也适用于相同的方法。

以下是这些最佳实践的快速参考：learn-how-to-use-scopes-properly-in-angularjs

- Naigel

Answer 2

ng-if指令应该始终看到父作用域，请参见演示。

在指令的隔离作用域中，最好通过接口将$scope对象向下传递，而不是依赖于$parent属性的存在。

app.controller("myCtrl", function($scope){
    $scope.foo = "bar";
});

app.directive("myDirective", function(){
    return {
        scope: {
            // expect foo to be passed to the directive
            // = means conserve bi directional binding
            foo: "=" 
        },
        link: function(scope) {
            ... // scope.foo is defined
        }
    }
});

在视图中

<div ng-controller="myCtrl">
    <my-directive foo="foo"></my-directive>
</div>

- Ozrix

Answer 3

最佳实践是使您的指令解耦，它应该是自包含的，如果指令需要外部方面，则可以注入或绑定它们。不要依赖于在特定上下文中使用某些东西。

一个例子是：

<div ng-controller="Parent as parent">

  <div ng-if="parent.showMessage">
    Some simple message.
  </div>

  <div child-one parent="parent"></div>

</div>

控制器

app.controller('Parent', function () {
    var self = this;
    self.showMessage = true;
});

app.directive('childOne', function() {
    return {
        controllerAs: 'childOne',
        controller: function($scope, $attrs) {
            var parent = $scope.$eval($attrs.parent);

            var self = this;
            self.foo = 'bar';
            // Some simple logic.
            if (self.foo === 'bar') {
                parent.showMessage = false;
            }
        }
    };
});

- sreeramu

Answer 4

这样做似乎完全没问题。

<div ng-app ng-controller="NameCtrl">
    <div ng-controller="ChildCtrl as vm">
       {{$parent.names}}
    </div>
</div>

function NameCtrl($scope) {
    $scope.names = ["Tom", "Dick", "Harry"];
}

function ChildCtrl($scope) {
    $scope.parentnames = $scope.$parent.names;
}

请参考：http://jsfiddle.net/8bojdnpt/

从良好实践的角度来看，这种方法也很好，因为您还可以销毁不需要的作用域，以便它们不会留在缓冲区中。

然而，John Papa建议不要使用$parent: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controllers。相反，他更喜欢您使用controller as语法。

- Marco V

Answer 5

浏览johnpapa/angular-styleguide

- Ebin Manuval