绑定AngularJS控制器数据以查看
[英]Bind AngularJS controller data to view
问题描述
I am new to angular and might be missing some baselines. 
我刚开始接触角度，可能会缺少一些基准。 I am trying to bind my view to controller data as said here . 我想结合我的看法是说给控制器的数据在这里 。 If it is angular's all rage shouldn't be a complex situation. 如果是棱角分明，那么所有的怒火都不应该是一个复杂的情况。 Here i have my app.js: 这是我的app.js：
var app = angular.module('nwMetrics', []);
app.controller('MetricsController', ['$scope', function($scope){
$scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
$.eventsource({
label: "json-event-source",
url: "/data/beanstalk",
dataType: "json",
open: function() {
console.log( "opened connection" );
},
message: function( data ) {
$scope.beanstalks.push(data);
console.log( $scope.beanstalks );
// $.eventsource("close", "json-event-source");
}
})
}]);
And there's my view: 我的观点是：
<html lang="en" ng-app="nwMetrics">
...
<div ng-controller="MetricsController">
<div class="env row" ng-repeat="beanstalk in beanstalks">
<h3>
{{beanstalk.time}}
<em class="pull-right">{{beanstalk.type}}</em>
</h3>
</div>
</div>
Event source will receive SSE events and should push a new obj to $scope.beanstalks every second. 事件源将接收SSE事件，并应每秒将新的obj推送到$ scope.beanstalks。 The log on console shows what expected, a growing array printed every second, but the view is not - it shows only the initial value of $scope.beanstalks it stays static. 登录控制台显示预期的结果，每秒打印一个不断增长的数组，但视图不是-仅显示$ scope.beanstalks的初始值，它保持静态。
Also i've tried to move $.eventsource outside controller, but how would i call controller on js? 我也试图将$ .eventsource移到控制器之外，但是我怎么在js上调用控制器呢？ app.controller('MetricsController').beanstalks or app.MetricsController.beanstalks are not helping. app.controller（'MetricsController'）。beanstalks或app.MetricsController.beanstalks没有帮助。 (This also might have a simple answer, but i can only find how to access it through html.) （这也可能有一个简单的答案，但是我只能找到如何通过html访问它。）
Thanks in advance 提前致谢
2 个解决方案
解决方案1
1 2015-04-15 20:56:40
I am guessing $.eventsource isn't using AngularJS? 我猜$.eventsource不使用AngularJS吗？ If so, Angular has no idea that $scope.beanstalks has changed. 如果是这样，Angular不知道$scope.beanstalks已经更改。
So either add: $scope.$digest() at the end of your message callback to force Angular to update itself 因此可以在message回调的末尾添加： $scope.$digest()来强制Angular更新自身
Or (probably preferred): use the $http Angular service to interact with "/data/beanstalk" instead. 或（可能是首选）：使用$http Angular服务与“ / data / beanstalk”进行交互。
解决方案2
1 已采纳 2015-04-15 20:59:35
If $.eventsource is some code that is external to AngularJS (not AngularJS service or something else injectable via AngularJS Dependency Injection), then this could work (I've added $scope.$apply() call): 如果$ .eventsource是AngularJS外部的某些代码（不是AngularJS服务或其他可通过AngularJS依赖注入注入的代码），那么这可以工作（我已经添加了$ scope。$ apply（）调用）：
var app = angular.module('nwMetrics', []); var app = angular.module（'nwMetrics'，[]）;
app.controller('MetricsController', ['$scope', function($scope){
var mcontroller = this
$scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
$.eventsource({
label: "json-event-source",
url: "/data/beanstalk",
dataType: "json",
open: function() {
console.log( "opened connection" );
},
message: function( data ) {
$scope.$apply(function() {
$scope.beanstalks.push(data);
console.log( $scope.beanstalks );
// $.eventsource("close", "json-event-source");
});
}
})
}]);
Please let me know if this will work for your case. 请让我知道这是否适合您的情况。
What is $scope.$apply and we should use it here? 什么是$ scope。$ apply，我们应该在这里使用它吗？ Couple of links: 几个链接：
- http://jimhoskins.com/2012/12/17/angularjs-and-apply.html http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
- https://github.com/angular/angular.js/wiki/When-to-use- $scope.$apply() https://github.com/angular/angular.js/wiki/何时使用- $ scope。$ apply（）
- https://docs.angularjs.org/api/ng/type/ $rootScope.Scope https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope
You could also use $scope.$digest() if you are sure that no parent scopes need update about $scope.beanstalks 如果您确定没有父作用域需要更新$ scope.beanstalks，也可以使用$ scope。$ digest（）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.