从控制器看服务中的值

我已经创建了一个服务来隔离业务逻辑，并将它注入到需要这些信息的控制器中。我最终想要做的是让控制器能够观察服务中的值，以便我不必通过广播/通知或复杂的消息传递解决方案来通知所有控制器数据更改服务。从控制器看服务中的值

我创建了一个plnkr，展示了我想要做的事情的基本概念。

http://plnkr.co/edit/oL6AhHq2BBeGCLhAHX0K?p=preview

是否有可能有一个控制器观看服务的价值？

来源

2013-04-09 nathasm

我的失望是因为蹲跳者不在了，代码也是如此，它使得这个问题（和答案）无用。 :(把代码放在这里，我会+1你的问题 – 2014-06-12 10:09:36

你已经在做对了。即将服务推入范围变量，然后将该服务作为范围变量的一部分进行观察。

这里是你工作的解决方案：

http://plnkr.co/edit/SgA0ztPVPxTkA0wfS1HU?p=preview

HTML

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="http://code.angularjs.org/1.1.3/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
    <button ng-click="start()">Start Count</button> 
    <button ng-click="stop()">Stop Count</button> 
    ControllerData: {{controllerData}} 
</body> 
</html>

的Javascript：

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

app.service('myService', function($rootScope) { 
    var data = 0; 
    var id = 0; 

    var increment = function() { 
    data = data + 1; 
    $rootScope.$apply(); 
    console.log("Incrementing data", data); 
    }; 

    this.start = function() { 
    id = setInterval(increment, 500) ; 

    }; 

    this.stop = function() { 
    clearInterval(id); 
    }; 

    this.getData = function() { return data; }; 

}).controller('MainCtrl', function($scope, myService) { 
    $scope.service = myService; 
    $scope.controllerData = 0; 

    $scope.start = function() { 
    myService.start(); 
    }; 

    $scope.stop = function() { 
    myService.stop(); 
    }; 

    $scope.$watch('service.getData()', function(newVal) { 

    console.log("New Data", newVal); 
    $scope.controllerData = newVal; 
    }); 
});

下面是一些你错过的东西：

$ scope。$ watch中的变量顺序错误。它的（newVal，oldVal）而不是其他方式。
由于您正在使用setInterval，这是一个异步操作，您将不得不让角度知道事情发生了变化。这就是为什么你需要$ rootScope。$ apply。
你不能$看一个函数，但你可以看看函数返回的是什么。

来源

2013-04-09 20:25:58 ganaraj

punker代码已经不存在了（或者我看不到它），请把答案的内容放在这里，而不是放在第三方网站上，让你的+ 1. – 2014-06-12 10:10:25

@ BernhardHofmann ++。我还没有点击过一个有效的plnkr的年龄段。 – 2014-07-07 22:23:05

@BernhardHofmann我已经从plunker里面插入了代码。 – ganaraj 2014-07-08 08:49:55

从控制器看服务中的值

回答

相关问题