Question

我是Angular世界的新手，我想知道使用$parent全局变量访问父作用域是否是一个好习惯。例如，data-ng-if创建了一个隔离的范围，这有时会导致访问父范围的一些问题，因此唯一的方法是$parent.myVariable。

任何一个例子，任何建议，以确保我的代码是干净的，并遵循良好的做法将是可观的。

Answer 1

这不是一个好习惯，它会给你带来麻烦。我们假设你有<div>绑定到控制器和<div ng-if>，你决定在潜水中使用{{ $parent.myVariable }}。如果您需要在另一个ng-if内嵌套，会发生什么？或者仅删除ng-if？

我建议您将变量保存在存储在控制器$scope变量中的对象中所以你应该在你的控制器中有这样的东西。

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

现在，您可以避免在$parent中使用<div>并安全查看{{ MyValues.myVariable }}，而角度将会回落$parent，直到找到MyValues个对象为止，所以你（几乎）可以忘记ng-if范围问题。这同样适用于嵌套控制器。

以下是对这类最佳做法的快速参考：learn-how-to-use-scopes-properly-in-angularjs

Answer 2

ng-if指令应该看到父范围，see demo。

对于指令上的隔离范围，最好通过接口传递$scope个对象，而不是指望$parent上存在属性：< / p>

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>

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

Answer 4

这样做似乎完全没问题。

jsonserialization

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

从良好的实践角度来看，这种方法也很好，因为你也可以销毁不需要的范围，这样它们就不会留在缓冲区中。

然而，John Papa建议不要使用<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; }：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controllers。相反，他更希望您使用$parent语法。

Answer 5

浏览johnpapa/angular-styleguide

在角度中使用$ parent是一个好习惯吗？

5 个答案: