AngularJS:通过服务更新将指令绑定到控制器
AngularJS: Bind a directive to a Controller via a Service update
如何通过服务更新将指令绑定到控制器?
我想创建通过指令(添加到购物车按钮)更新购物车(服务)的可能性,然后控制器(显示购物车)将更新其视图。
尽管我在服务本身上添加了一个手表,但我的控制器没有更新。
当然,如果controller和指令不共享同一个作用域就好了(指令中嵌入:true)
服务:
angular.module('stamModule', [])
.factory('valueService', function () {
var factory = {
data: {value: 1000},
inc: inc,
getData: getData
};
function inc() {
this.data.value++;
}
function getData() {
return this.data;
}
return factory;
})
指令:
.directive('buttonDirective', function (valueService) {
var directive = {
restrict: 'E',
template: '<button>Inc</button>',
link: linkFnc
};
function linkFnc(scope, el) {
el.on('click', function () {
valueService.inc();
});
}
return directive;
})
控制器:
.controller('FirstController', function ($scope, valueService) {
var vm = this;
vm.serv = valueService;
$scope.$watch('vm.serv.getData()', function (newValue) {
console.log("watch");
console.log(newValue);
});
})
html:
<body ng-app="stamModule">
<hr>
<div ng-controller="FirstController as vm">
<p>{{vm.serv.data}}</p>
<button-directive ></button-directive>
</div>
这是一个演示:
https://jsfiddle.net/07tp4d03/1/
谢谢
您只需轻轻一按即可完成所有代码。不需要事件广播或类似的东西。
问题是,点击事件侦听器在 Angular 的摘要循环之外工作,因此 Angular watch 不适合您。
如果您将指令的代码更改为以下内容,它将起作用。
.directive('buttonDirective', function (valueService) {
var directive = {
restrict: 'E',
template: '<button ng-click="inc()">Inc</button>',
link: linkFnc
};
function linkFnc(scope) {
scope.inc = function() {
valueService.inc();
};
}
return directive;
})
如何通过服务更新将指令绑定到控制器?
我想创建通过指令(添加到购物车按钮)更新购物车(服务)的可能性,然后控制器(显示购物车)将更新其视图。 尽管我在服务本身上添加了一个手表,但我的控制器没有更新。
当然,如果controller和指令不共享同一个作用域就好了(指令中嵌入:true)
服务:
angular.module('stamModule', [])
.factory('valueService', function () {
var factory = {
data: {value: 1000},
inc: inc,
getData: getData
};
function inc() {
this.data.value++;
}
function getData() {
return this.data;
}
return factory;
})
指令:
.directive('buttonDirective', function (valueService) {
var directive = {
restrict: 'E',
template: '<button>Inc</button>',
link: linkFnc
};
function linkFnc(scope, el) {
el.on('click', function () {
valueService.inc();
});
}
return directive;
})
控制器:
.controller('FirstController', function ($scope, valueService) {
var vm = this;
vm.serv = valueService;
$scope.$watch('vm.serv.getData()', function (newValue) {
console.log("watch");
console.log(newValue);
});
})
html:
<body ng-app="stamModule">
<hr>
<div ng-controller="FirstController as vm">
<p>{{vm.serv.data}}</p>
<button-directive ></button-directive>
</div>
这是一个演示: https://jsfiddle.net/07tp4d03/1/
谢谢
您只需轻轻一按即可完成所有代码。不需要事件广播或类似的东西。
问题是,点击事件侦听器在 Angular 的摘要循环之外工作,因此 Angular watch 不适合您。 如果您将指令的代码更改为以下内容,它将起作用。
.directive('buttonDirective', function (valueService) {
var directive = {
restrict: 'E',
template: '<button ng-click="inc()">Inc</button>',
link: linkFnc
};
function linkFnc(scope) {
scope.inc = function() {
valueService.inc();
};
}
return directive;
})