AngularJS:当 $rootScope 值更改时,指令中的 $watch 不起作用

2024-01-16

我创建了一个应用程序 AngularJS,其中我有一个指令,我在指令中设置了一个监视,以便在 $rootScope 变量发生更改时触发指令中的一些方法,但问题是当 $rootScope.name值已更改指令内的手表不起作用

我的代码如下所示

工作演示 http://jsfiddle.net/xxkgxLr9/

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope, $rootScope) {
    $scope.treeFamily = {
        name : "Parent"
    };

    $scope.changeValue = function()
    {
        $rootScope.name = $scope.userName;
    };

});

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {},
        template:'<div>sample</div>',
        link : function(scope, elm, $attrs) {
           function update()
           {
           };
           scope.$watch('name', function(newVal, oldVal) {
                console.log('calling');
               update();
            }, true);
        }
    };
});

我已经更正了。为了工作fiddle http://jsfiddle.net/xxkgxLr9/1/

<div ng-app="myapp">
  <div ng-controller="TreeCtrl">
    <input type="text" ng-model="userName"/>
    <button ng-click="changeValue()">Change</button>
    <tree name="name">
    </tree>
  </div>
</div>



module.directive("tree", function($compile) {
  return {
    restrict: "E",
    transclude: true,
    scope: {
        name: '='
    },
    template:'<div>sample</div>',
    link : function(scope, elm, $attrs) {
       function update()
       {
       };
       scope.$watch('name', function(newVal, oldVal) {
            console.log('calling');
           update();
        }, true);  
    }
  };
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:当 $rootScope 值更改时,指令中的 $watch 不起作用 的相关文章

  • $anchorScroll 和 $location 仅在第二次尝试后才有效

    我正在尝试使用 anchorScroll and location hash 滚动到div 我在页面顶部有一个底部 当我单击底部时 我希望页面向下滚动到我有一个页面的底部 div 由于某种原因 第一次单击该按钮时 我的页面不会滚动 如果第二
  • AngularJS 和 Webpack 集成

    我正在寻找一些使用帮助webpack http webpack github io docs 对于大型 AngularJS 应用程序 我们使用基于功能的文件夹结构 每个功能 页面都有一个模块 并且它们有控制器 指令 我已经成功配置了 web
  • 量角器元素(..)从单独的文件返回未定义

    我正在编写一个 Protractor 测试 在我的 test step js 文件中我有 element by css getText then function text expect text to equal expectedText
  • AngularJS:清除 $watch

    我的 AngularJS 应用程序中有一个监视功能 scope watch quartzCrystal function 但是 在某些条件之后 在我的示例中 更改我的页面 单页应用程序 https en wikipedia org wiki
  • angularjs 如何使用 ng-repeat 创建 div 堆栈

    简而言之 我有一个用 ng repeat 创建的 div 列表 div class col md 2 4 ul class list unstyled cs tag item grp li class clearfix div class
  • 如何获取 AngularJS 指令中元素的 x 和 y 位置

    在指令的链接函数部分中 我们可以访问element目的 我想确定是否element对象位于当前视口内 如果可用 我目前有以下内容 link function scope element attrs controller var page a
  • 如何从模板脚本访问 AngularJS 变量

    我的控制器 scope totals totals 我的模板 按 html 注入的预期工作 totals 但我需要的是访问变量totals在模板的脚本中 如下所示 我试过了 scope totals totals totals 等 均无济于
  • angular.isdefine 有什么好处?

    有什么好处angular isdefined超过和超过foo undefined 我一时想不出有什么好处 在 Javascript 中以任何方式访问真正未定义的变量 除了 typeof 都会抛出错误 你只能使用Angular isDefin
  • 我将与 ng-include 一起使用什么文件路径?

    我的角度项目的路径是这样的 web server py flask server program app static app js controllers js etc templates index html home html 索引
  • 在 JSFiddle 上运行的简单 AngularJS

    如何用以下代码制作 jsfiddle div ul li num li ul div
  • AngularJS:如何获取 JSON 对象的密钥

    我不确定这是否与 AngularJS 有任何关系 以及是否仅与 JSON 相关 无论如何 假设我们有以下 JSON scope dataSets names Horace Slughorn Severus Snape genders Mal
  • 多个指令 [myPopup、myDraggable] 请求新的/隔离的范围

    我编写了一个对话框指令 myPopup 和另一个用于拖动此对话框的指令 myDraggable 但我总是收到错误 多个指令 myPopup myDraggable 请求新的 隔离的范围 这是一个笨蛋 http plnkr co edit k
  • 我如何使用 angularJS Restful 服务使用来自外部文件的 json 数据

    我正在开发一个应用程序 我正在从一个中检索 json 数据 使用 http get 方法的外部文件工作正常 现在我正在尝试使用角度 安心的服务 它在过滤器中工作正常 但是当我在控制器中使用它时 它是 显示未定义 Service js Fil
  • 对数组中的每个元素设置 $scope.$watch

    我想弄清楚如何设置 scope watch在数组中的每个元素上 我只关心每个元素的某些属性 在我的例子中 每个rental date对象具有三个属性 date start time and stop time 每当start time已更改
  • 声明指令 templateUrl 相对于 root

    我目前正在声明相对于当前窗口位置的 templateUrl cvApp directive personalDetails function return restrict A templateUrl Scripts app templat
  • 智能表 - 预选特定行

    我正在使用智能表 我需要预先选择特定行 因此 在加载我的列表后 我循环进入它并设置isSelected当我到达我想要选择的项目时属性 Preselect a row for var i 0 len scope displayCollecti
  • 如何使用 angularjs 更改 iframe src

    p Your browser does not support iframes p 如何修改iframe的src 你还需要 sce trustAsResourceUrl否则它不会打开 iframe 内的网站 JSFiddle http js
  • 如何在angularjs中读取pdf流

    I got the following PDF stream from a server 如何在 AngularJS 中读取这个流 我尝试使用以下代码在新窗口中将其作为 PDF 文件打开 success function data wind
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • 角度模态弹出窗口中的范围问题

    我的页面上有一个模式弹出窗口 模式弹出窗口使用引导角度库 在模式的主体内部 我有一个带有 ng model 属性的文本框 按下 确定 按钮后 我想使用该文本框值

随机推荐