AngularJS 控制器继承

2024-03-04

AngularJS 具有基于 DOM 的控制器继承,如 Angular 文档中所述。

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

作用域变量“value”仅存在于 BaseController 中。基于此,在更改 BaseController 或 DerivedController 中方法的值时,我希望这两个值都需要更新。但只有单个作用域变量会被更新。

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

如何在某个级别进行更改以传播到当前范围的直接子级和直接父级。

我们可以通过使用来实现

$范围.$观察

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

Edit 1:

通过使用 $scope.$watch 这就是我的意思

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

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


当多个控制器需要访问相同的数据时,service https://docs.angularjs.org/guide/services应该使用。您不应该依赖作用域继承,因为它限制了您编写 HTML 的方式。例如,将来,您决定 DerivedController 不应该是 BaseController 的子级。

您的服务通常应该提供公共 API,并隐藏实现。这使得重构内部结构变得更加容易。

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 http://jsfiddle.net/mrajcok/gY3uZ/.

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 控制器继承 的相关文章

随机推荐

  • 如何更改反应中道具的值?

    如何改变props的值 如何setProps 假设this props contact name的值是John 我想把它改成Johnny 我怎样才能做到这一点 例如 changeValue this props contact name J
  • 使用 Apache Superset API 提供数据集

    我想了解是否可以使用 Superset API 填充 Superset 数据集 我浏览了文档 https superset apache org docs rest api我感觉我们不能像上传 CSV 文件那样做到这一点 我知道另一种可能性
  • 在 html 文档中标记文本

    假设我有以下标记 h1 Some title h1 p First paragraph p p Second paragraph p 我需要标记文本的某些部分 即 第一段第二段 它看起来像这样 h1 Some title h1 p F p
  • 确定图像相对于页面顶部的位置

    我有 2 张图像需要稍微重叠 我的第一张图片是 logo png 第二张图片是 form png 我的html是 div img src images logo png align left div div img src images f
  • gnuplot - 将字符串变量转换为小写

    如何在 gnuplot 中将字符串转换为小写 这是一个 gnuplot 字符串处理问题 示例 我希望在 gnuplot 脚本中检查用户输入的参数 if tolower ARG2 ohms 因此接受 ohms Ohms 或 OHMS 首选是不
  • 整数除以 3 最快的方法是什么?

    int x n 3 lt make this faster for instance int a n 3 lt normal integer multiplication int b n lt lt 1 n lt potentially f
  • 使用 Python 删除所有 DynamoDB 项目

    如何使用 python boto3 删除 DynamoDB 中的所有项目 我正在尝试这样做 scan table scan with table batch writer as batch for each in scan Items ba
  • J2ME开发不用Java?

    我正在第一次涉足 J2ME 世界 我更喜欢使用函数式语言来进行开发 Scala 曾经支持 CLDC 但已不再维护 Bigloo似乎消失了 解释器 例如 Jython 是不行的 因为 J2ME 应用程序必须很小 至少我的应用程序必须很小 我想
  • GCov可以在windows下使用吗?

    我可以在 Windows 中安装 gcov 工具吗 或者我可以在windows下的eclipse中使用这个工具的插件吗 我对这个工具很陌生 我对这个工具没有任何想法 请帮我获取这个工具的信息 请告诉我在我的机器上运行此工具的要求 我在哪里可
  • YouTube IFRAME 与 YouTube Android 播放器 API

    我计划在我的 Android 应用程序中安装 YouTube 播放器 并找到了两种替代方案 框架API https developers google com youtube iframe api reference或与YouTube An
  • 如何将 Heroku 应用程序链接到私人 Github 存储库?

    我是 Heroku 的新手 我不熟悉部署 管道的用语 我已经安装了 Heroku CLI 并使用以下命令部署了一个应用程序 run heroku create myNewHerokuApp 我的实例现已制作完毕 我在 Github 上有一个
  • 页面部分回发后如何在 UpdatePanel 中保持焦点位置

    我在带有更新面板的页面中有四个控件 最初 鼠标焦点设置为第一个控件 当我将页面部分回发到服务器时 焦点会自动从我按下 Tab 键的控件的最后一个焦点控件移动到第一个控件 有什么办法可以保持最后的焦点吗 看一眼使用自动回发控件在更新面板中恢复
  • 在 Webpack + VueJs 中链接样式表和要求它们有什么区别?

    使用 VueJs 和 Webpack 组合 我发现要包含外部样式表 例如 bootstrap 您可以执行以下两种操作之一 在你的主 js 脚本中 你可能需要这样的样式表 require assets lib bootstrap min cs
  • textContent 与 insideText 之间的区别

    有什么区别textContent and innerText在 JavaScript 中 我可以用吗textContent如下 var logo document getElementsByClassName logo 0 logo tex
  • 如何解决模块中声明了包,但模块不读取它?

    我正在将我的开发环境迁移到另一台电脑 我使用NetBeans 10 打开JDK11 JavaFX 当我将主项目导入 NetBeans 时 出现以下错误 on import java util logging Level import jav
  • 是否有可能构建一个相对快速的无类型 lambda 演算机?

    纯无类型 lambda 演算是一个强大的概念 然而 构建一台供现实世界使用的机器或解释器通常被描述为 接近 不可能 我想对此进行调查 理论上是否可以构建一个相对较快的无类型 lambda 演算机 我所说的相对较快通常是指在相似数量的资源 门
  • IBM Worklight 6.2 - StoragePlugin 上出现错误

    我从 Worklight 6 1 0 1 升级到 6 2 从那时起 我的应用程序停止成功加载 JSONStore 它说找不到类 StoragePlugin 尽管该类实际上存在于 worklight android jar 中 它还在 con
  • Java 中的公共接口和发布接口有什么区别? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我读过这两页 http martinfowler com ieeeSoftware published pdf http martinfo
  • 调试模式或发布模式

    最近 我正在致力于将物理引擎集成到我的图形引擎程序中 在此之前 我总是在调试模式下构建我的程序 因为我觉得调试意味着安全 并且可以提供更多信息让我知道哪里出了问题 在我的程序中 我在Release模式下构建了Assimp 但直到现在我仍然在
  • AngularJS 控制器继承

    AngularJS 具有基于 DOM 的控制器继承 如 Angular 文档中所述 div p Base Controller Value value p div