控制器功能:
$scope.init = function () {
Words.get('init', $scope.randNum)
.error(function (data) {
console.log('init error: ' + data.message);
})
.success(function (data) {
$scope.board = data.settings.board;
$scope.tray = data.tray;
$scope.scores = data.pointsPerLetter;
$scope.totalScore = data.score.total;
console.log('init: ' + $scope.tray);
})
}
和我的服务:
angular.module('wordService', [])
.factory('Words', function ($http) {
var id;
return {
get: function (call, num) {
id = num;
return $http.get('http://xxxxx');
},
send: function (call, data) {
console.log('send: ' + data)
return $http.post('http://xxxxx' + call, data);
}
}
});
现在而不是ngAccess = angular.element(document.getElementById('ws')).scope();
调用ngAccess.init()或$ scope.init
如何将此调用添加到服务中,并在需要时调用它,同时仍在更新控制器中的范围?以上原因不起作用的原因是我使用的是browserify,但我还没有访问范围。
场景:我需要能够单击按钮并调用更新范围的函数。 警告:创建按钮并将其添加到画布。 (无论如何,我仍然有点击通话等)。
一如既往地提前感谢!
答案 0 :(得分:1)
将数据对象移动到服务中并分配对控制器范围变量的引用...
您的工厂可能看起来像:
.factory('Words', function ($http) {
var id;
var results = {};
var get = function (call, num) {
id = num;
return $http.get('http://xxxxx').then(function(response){
results.board = response.data.settings.board;
results.tray = response.data.tray;
results.scores = response.data.pointsPerLetter;
results.totalScore = response.data.score.total;
};
};
var send = function (call, data) {
console.log('send: ' + data)
return $http.post('http://xxxxx' + call, data);
};
return {
get: get,
send: send,
results: results
}
});
虽然您的控制器看起来像:
.controller(function($scope, Words){
$scope.words = Words.results;
$scope.init = function () {
Words.get('init', $scope.randNum).then(function(){
console.log($scope.words); // should log the data you want
}, function(response){ console.log(response)});
};
// still calling from controller but you could from any component and still
// have the local scope variable update based on its assignment to the
// service object
$scope.init();
})
请注意,我确实修改了您的工厂以使用显示模块模式。这样,除了来自其他组件的调用之外,您还可以对get / set函数进行内部调用。
现在,您应该可以在应用程序的任何其他位置添加按钮(即,不需要从控制器范围进行原型继承)。例如,该指令将进行调用并更新结果,这将反映在控制器范围变量
中.directive('update', function(Words){
return function(scope) {
scope.update = function(){
Words.get('update', 'somevalue')
}
}
})
在视图中声明它如下:
<button update ng-click="update()">Update</button>