标签: angularjs-rootscope

在角度,我有一个对象将通过服务暴露在我的应用程序中.

该对象上的某些字段是动态的,并且将通过使用该服务的控制器中的绑定正常更新.但是一些字段是计算属性,取决于其他字段,需要动态更新.

这里有一个简单的例子(这是工作在jsbin 这里).我的服务模型公开领域a,b并c在那里c通过以下公式计算a + B在calcC().请注意,在我的实际应用程序中,计算要复杂得多,但实质内容就在这里.

我能想到让它工作的唯一方法是将我的服务模型绑定到$rootScope,然后$rootScope.$watch用来监视任何控制器更改a或b何时更改,重新计算c.但这看起来很难看.有没有更好的方法呢？

第二个问题是表现.在我的整个应用程序a和b是对象的大名单,其中获得合计下来c.这意味着$rootScope.$watch函数将进行大量深度数组检查,这听起来会损害性能.

我在BackBone中采用了一种平衡的方法,尽可能地减少了重新计算,但角度似乎并不适合采用一种方法.对此的任何想法都会很棒.

这是示例应用程序.

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

//A service providing a model available to multiple controllers
myModule.factory('aModel', function($rootScope) {
  var myModel = {
    a: 10,
    b: 10,
    c: null
  };

  //compute c from a and b
  calcC = function() …

用户注销后,我需要清理我的$ rootScope.我试过$rootScope.$destroy()但是没有做到这一点.有没有办法循环遍历$ rootScope中的所有值并删除它们或简单地重置它的方法？

我正在尝试在一些短语上构建动画,这些短语将显示在网站主页上,随机位置以及淡入淡出和翻译效果.

我会做到这一点使用NG风格属性的NG-重复里面的属性和设置NG-样式值调用HomeController的内部定义JavaScript函数.

使用此approch会导致angular抛出异常:$ rootScope:infdig error 10 $ digest()迭代达到.中止!观察者在最近5次迭代中被解雇

我读了很多关于这个,但没有解决方案解决了我的情况.有人可以帮帮我吗？

这是index.html的一部分:

<div class="phrasesContainer" animate-phrases="">
      <h3 class="flying-text" ng-repeat="phrase in Phrases" ng-style="getTopLeftPosition()">{{phrase}}</h3>
    </div>

这是控制器功能:

$scope.getTopLeftPosition = function() {
var top = randomBetween(10, 90);
var left = getRandomTwoRange(5, 30, 70, 80);

return {
  top: top + '%',
  left: left + '%'
};

}

这是一个演示:http://plnkr.co/edit/8sYks589agtLbZCGJ08B？p = preview

$ rootScope和$ rootScope之间有什么区别.$ root？

有什么区别

$ rootScope.global.flag = true和$ rootScope.$ root.global.flag = true

他们俩都在rootcope中访问同一个变量吗？

如果是这样,是否有任何特殊情况我们必须使用它们中的任何一个？

我想知道是否有办法使用 $rootScope 访问 $scopes 变量，这样如果在作用域中定义了一个函数，我可以使用 $rootscope 调用它，或者是否有使用 $scope.var1 定义的变量我可以使用 $rootScope 访问它

我的index.html模板中有一个搜索栏,我需要隐藏在某些页面上.我正在使用ui-router和$state.

我可以使这项工作的唯一方法就是注入$rootscope到我的所有控制器要么ng-hide: true或false将其打开或关闭需要的地方.(我只需要隐藏在1或2页上)

我不认为这是正确的方法,因为我的所有控制器现在都依赖并注入了$rootscope.

还有另一种方法吗？

我定义hostService如下。情况是我首先hostService.addListener()在控制器中调用，然后控制器可能会发出一条消息$rootSceop.$emit，hostService应该处理它。

app.service('hostService', ['$rootScope', function ($rootScope) {    
    this.button = function () {
        Office.context.ui.displayDialogAsync("https://www.google.com", {}, function () {});
    }

    this.addListener = function () {
        $rootScope.$on("message", function (event, data) {
            this.button()
        })
    }

但是，问题是上面的代码会引发错误：

TypeError: this.button is not a function

有谁知道如何修理它？

我们有一个大型的Angularjs 1.6应用程序,它将$ rootscope分散在整个应用程序中,分布在过滤器,服务,路由等200多个地方.所以它需要重构,但我不知道如何知道何时删除它.何时在应用程序中使用$ rootscope是最佳做法？

我从头读过所有内容,用它来存储变量,我假设它是用于在控制器之间共享数据.我已经读过,最好将工厂/服务用于此用例,我还读到一个有效的用例是使用$ rootscope作为全局事件总线.

我没有在Angularjs文档中看到这个解释.

嗨,我想知道在性能方面哪些更好.假设我有这个广播东西的工厂:

angular.module('core.foo')
  .factory('Foo',
    ['$rootScope', 
      function FooFactory($rootScope) {

        $rootScope.$broadcast('bar', baz);

      }
    ]
  );

并在某个地方(或很多人)监听该事件.什么会更好？

要使用$ rootScope.$ on:

angular.module('foo').component('foo', {
  templateUrl: 'foo.html',
  controller: ['$rootScope',
    function FooController($rootScope) {

      $rootScope.$on('bar', function(event, data){
        // use the data
      });

    }]
});

或$ scope.$ on:

angular.module('foo').component('foo', {
  templateUrl: 'foo.html',
  controller: ['$scope',
    function FooController($scope) {

      $scope.$on('bar', function(event, data){
        // use the data
      });

    }]
});

两者都有效,我只是好奇.

我正在使用一个应用程序,我在service.js服务结束时有以下行.

$rootScope.$broadcast('rootScope:Object') 

这里Object是API服务的输出.如果我现在想在我的实际app.js文件中使用此Object,我该如何使用它？上面的行指定了什么以及如何在以后的页面中使用它？

任何帮助表示赞赏.

编辑:

从给定的答案尝试以下:

在服务页面中:

this.getobject=function(){
//http api Function call with result as  response.data = resp 
$rootScope.$broadcast('rootScope:resp',resp);
}

在子范围页面中:

resp=[];
$rootScope.$on('rootScope:resp',function(resp) {
          $scope.resp=resp;
          console.log(resp);

      });
$scope.$on('rootScope:resp', function(e, params){
             console.log(params); // respobject
        });

不幸的是,两者都没有在控制台上打印.这个方法有什么问题吗？

我在AngularJS中有一个$ rootScope对象,如下所示:

$rootScope.stuff = {
    someId: {
        name: "Patrick",
        age: 105
    },
    anotherId: {
        name: "Joseph",
        age: 94
    }
};

我有一个函数定义,将对象添加到$ rootScope.stuff,它工作正常:

$rootScope.addSomeStuff = function(id, data) {
    $rootScope.stuff[id] = data;
};

但是,我也有一个试图删除的功能(基于https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete),它不起作用:

$rootScope.deleteStuff = function(id) {
    delete $rootScope.stuff[id];
};

当我检查$rootScope.stuff[id]我得到了我想删除的正确对象.我也尝试过拼接,但是它会像我想的那样抛出一个错误.有什么建议？谢谢.

我正在尝试运行并收到以下消息：

未捕获的ReferenceError：在app.js第12行中未定义$ rootScope

这是我的js / app.js

angular.module('addEvent', ['ngRoute'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('/add-event', {
                templateUrl: 'views/add-event.html',
                controller: 'formCtrl',
                controllerAs: 'eventCtl'
            })
            .otherwise({
                redirectTo: '/'
            });
        $locationProvider.html5Mode(true);
    }])
    .run(['$rootScope', function() {
        $rootScope.event = [];
    }]);

这个js / controller.js

  angular.module('addEvent')
      .controller('formCtrl', ['eventFactory', function(eventFactory) {
          //$scope.event=[];
          this.event = eventFactory.getAllEvents();
          this.submitForm = function(form) {
              eventFactory.createEvent(angular.copy(form), this.event);
              // $scope.event.push(angular.copy(form));
              console.log($scope.event);
          }
      }])

服务/eventFactory.js

angular.module('addEvent')
    .factory('eventFactory', function() {
        var eventFactory = {};
        var events = [];
        eventFactory.getAllEvents = function() {
            return events;
        }
        eventFactory.createEvent = …