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

问题描述

AngularJS 具有基于 DOM 的控制器继承，如 angular 文档中所述.

<p>基本控制器值:{{value}}</p><button ng-click="updateValue()">在 Base 中更新</button><div ng-controller="DerivedController"><p>派生控制器值:{{value}}</p><button ng-click="updateValue()">在派生中更新</button>

范围变量value"仅存在于 BaseController 中.基于此，在更改 BaseController 或 DerivedController 中方法的值时，我希望这两个值都需要更新.但只有单个作用域变量会更新.

这是一个演示相同示例的小提琴:http://jsfiddle.net/6df6S/1/

如何将级别的更改传播到当前作用域的直接子级和直接父级.

我们可以使用

来实现<块引用>

$scope.$watch

有没有办法在不使用它或任何此类观察者的情况下做到这一点?

编辑 1:

这里使用 $scope.$watch 是我的意思

$scope.$watch("value", function () {$scope.$broadcast("childChangeListener");//向下到所有子作用域$scope.$emit("parentChangeListener");//向上到所有父作用域});

我一直在寻找在不使用这种机制的情况下在所有范围内更新值的方法.

解决方案

当多个控制器需要访问相同的数据时，一个 service.您不应该依赖范围继承，因为它限制了您编写 HTML 的方式.例如，在将来，您决定 DerivedController 不应是 BaseController 的子项.

您的服务通常应提供公共 API，并隐藏实现.这样可以更轻松地重构内部结构.

HTML:

<p>基本控制器值:{{model.getValue()}}</p><button ng-click="model.updateValue('Value updated from Base')">在 Base 中更新</button><div ng-controller="DerivedController"><p>派生控制器值:{{model.getValue()}}</p><button ng-click="model.updateValue('Value updated from Derived')">在派生中更新</button>

JavaScript:

app.factory('sharedModel', function () {//私人物品无功模型 = {值:初始值"};//公共接口返回 {获取值:函数(){返回模型值；},更新值:函数(值){模型值 = 值；}};});函数 BaseController($scope, sharedModel) {$scope.model = sharedModel;}函数派生控制器($scope，sharedModel){$scope.model = sharedModel;}

小提琴.

另外，我不建议使用 $rootScope 在控制器之间共享.

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>

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.

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.

We can implement this by using

$scope.$watch

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

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

解决方案

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.

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:

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

Fiddle.

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

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