具有共享数据模型的角多指令
这篇文章的要点是，我想避免使用$scope.$watch，因为它被教导会导致性能下降。
因此，假设有一个共享视图部分/模板，使用两个不同的指令将其称为"mypage“，将它们称为"directive1”和"directive2"，在它们中共享一个数据模型，让我们称之为"awesomeData“
也许它看起来像这样：
<div class="mypage-root">
<directive1 shared-data="awesomeData"></directive1>
<directive2 shared-data="awesomeData"></directive2>
</div>显然，当"awesomeData“在指令或根视图中发生变化时，其他部分的数据也会发生变化(假设它是双向绑定的)。
但是，如果当directive2更新了数据模型(比如在directive2中调用函数)时，我希望在directive1中发生其他事情，该怎么办？
我可以使用一个观察者，但正如前面提到的，这是一个性能下降。
还有什么其他的方法，有什么“真正的”角度的方式来做到这一点？
回答 1
Stack Overflow用户
发布于 2016-02-23 20:42:47
我知道你在问如何在没有观察者的情况下做这件事，但我认为在这种情况下，观察者是最好的答案，因为它使关注点分离。directive1不应该知道directive2，而应该只知道MySharedService和它可能播放的任何内容：
$rootScope.$broadcast('myVar.updated');..。
$scope.$on('myVar.updated', function (event, args) {
});编辑：
另外，根据指令将使用的模型的复杂性，您可以从它们的父控制器传递该模型(缺点是必须从父控制器实例化模型)：
HTML：
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<directive1 my-model="model"></directive1>
<directive2 my-model="model"></directive2>
</body>
</html>联署材料：
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.model = { info: 'Starting...' };
});
app.directive('directive1', function() {
var controllerFn = function($scope) {
$scope.changeInfo = function() {
$scope.vm.myModel.info = 'Directive 1';
};
};
return {
restrict: 'E',
controller: controllerFn,
template: '<div><span>hello</span> <span ng-bind="vm.myModel.info"></span> <button ng-click="changeInfo()">Click</button></div>',
controllerAs: 'vm',
bindToController: true,
scope: {
myModel: '='
}
}
});
app.directive('directive2', function() {
var controllerFn = function($scope) {
$scope.changeInfo = function() {
$scope.vm.myModel.info = 'Directive 2';
};
};
return {
restrict: 'E',
controller: controllerFn,
template: '<div<span>bye</span> <span ng-bind="vm.myModel.info"></span> <button ng-click="changeInfo()">Click</button></div>',
controllerAs: 'vm',
bindToController: true,
scope: {
myModel: '='
}
}
});柱塞：https://plnkr.co/edit/EwdHFl7eZl2rd43UVG4J?p=preview
编辑2:
与方法2一样，您可以拥有一个提供此model的共享服务。
https://stackoverflow.com/questions/35587615
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号