AngularJS控制器继承 [英] AngularJS controller inheritance

问题描述

AngularJS有一个基于DOM的控制器继承，如角文档提到的。

AngularJS has a DOM based controller inheritance, as mentioned in the angular Docs.

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <button ng-click="updateValue()">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{value}}</p>
        <button ng-click="updateValue()">Update In Derived</button>
    </div>
</div>

范围变量价值是present只在BaseController。在此基础上，同时改变在BaseController或DerivedController的方法的值，我想这两个值需要更新。但只有个别范围变量被更新。

The scope variable "value" is present only in the BaseController. Based on this, while changing the value at a method in BaseController or DerivedController, I want both the values need to be updated. But only the individual scope variable gets updated.

下面是一个小提琴展示同样的例子： http://jsfiddle.net/6df6S/1/

Here is a fiddle demonstrating the same example: http://jsfiddle.net/6df6S/1/

如何能在一个水平的变化进行传播到当前范围的直接子和直属母公司。

How can changes at a level be made to propagate to the immediate child and immediate parent of the current scope.

我们可以通过实现这个

$范围。$看

有没有办法做到这一点不使用它或任何这样的观察？

Is there any way to do this without using it or any such watchers?

编辑1：

通过使用$范围。$看这里就是我的意思

By using $scope.$watch here is what I meant

$scope.$watch("value", function () {
   $scope.$broadcast("childChangeListener"); //Downwards to all children scopes
   $scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});

我一直在寻找方法，使价值会得到所有范围更新，而无需使用这样的机制。

I was looking for ways in which the value would get updated across all scopes without using such a mechanism.

推荐答案

在多个控制器需要访问相同的数据，一个服务< /一>应该被使用。你不应该依赖于继承的范围，因为它限制了如何编写你的HTML。例如，在未来，你做决定DerivedController不应该是BaseController的孩子。

When multiple controllers need access to the same data, a service should be used. You should not rely on scope inheritance, as it restricts how you can write your HTML. E.g., in the future, you made decide that DerivedController should not be a child of BaseController.

您服务通常应该提供一个公共的API，并隐藏实现。这使得它更容易重构内部。

Your service should typically provide a public API, and hide the implementation. This makes it easier to refactor the internals.

HTML

<div ng-controller="BaseController">
    <p>Base Controller Value: {{model.getValue()}}</p>
    <button ng-click="model.updateValue('Value updated from Base')">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{model.getValue()}}</p>
        <button ng-click="model.updateValue('Value updated from Derived')">Update In Derived</button>
    </div>
</div>

JavaScript的：

JavaScript:

app.factory('sharedModel', function () {
    // private stuff
    var model = {
        value: "initial Value"
    };
    // public API
    return {
        getValue:    function() { 
           return model.value; 
        },
        updateValue: function(value) {
           model.value = value;
        }
    };
});

function BaseController($scope, sharedModel) {
    $scope.model = sharedModel;
}

function DerivedController($scope, sharedModel) {
    $scope.model = sharedModel;
}

小提琴。

另外，我不推荐使用$ rootScope的控制器之间共享。

Also, I do not recommend using $rootScope for sharing between controllers.

这篇关于AngularJS控制器继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！