我一直在将自定义指令升级到新的component architecture。我读过组件不支持观察者。它是否正确？如果是这样，您如何检测对象的更改？对于一个基本的例子，我有自定义组件myBox，它有一个游戏绑定的子组件游戏。如果游戏组件中有更改游戏，我如何在myBox中显示警告消息？我明白有rxJS方法是否有可能纯粹在棱角分明？我的JSFiddle
的JavaScript
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Tony Danza";
});
app.component("myBox", {
bindings: {},
controller: function($element) {
var myBox = this;
myBox.game = 'World Of warcraft';
//IF myBox.game changes, show alert message 'NAME CHANGE'
},
controllerAs: 'myBox',
templateUrl: "/template",
transclude: true
})
app.component("game", {
bindings: {game:'='},
controller: function($element) {
var game = this;
},
controllerAs: 'game',
templateUrl: "/template2"
})
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="/template">
<div style='width:40%;border:2px solid black;background-color:yellow'>
Your Favourite game is: {{myBox.game}}
<game game='myBox.game'></game>
</div>
</script>
<script type="text/ng-template" id="/template2">
<div>
</br>
Change Game
<textarea ng-model='game.game'></textarea>
</div>
</script>
Hi {{name}}
<my-box>
</my-box>
</div><!--end app-->
答案 0 :(得分：148)
这个答案概述了在不使用watchers.的情况下编写AngularJS 1.5组件的五种技术
ng-change Directive $onChanges Life-cycle Hook $doCheck Life-cycle Hook ng-change指令可用于观察obj状态变化的alt方法，而不使用watch来准备AngularJs2？
您可以使用ng-change指令对输入更改做出反应。
<textarea ng-model='game.game'
ng-change="game.textChange(game.game)">
</textarea>
要将事件传播到父组件，需要将事件处理程序添加为子组件的属性。
<game game='myBox.game' game-change='myBox.gameChange($value)'></game>
JS
app.component("game", {
bindings: {game:'=',
gameChange: '&'},
controller: function() {
var game = this;
game.textChange = function (value) {
game.gameChange({$value: value});
});
},
controllerAs: 'game',
templateUrl: "/template2"
});
在父组件中：
myBox.gameChange = function(newValue) {
console.log(newValue);
});
这是未来的首选方法。使用$watch的AngularJS策略不可扩展，因为它是一种轮询策略。当$watch个侦听器的数量达到2000左右时，UI变得迟缓。 Angular 2中的策略是使框架更具反应性，避免将$watch放在$scope上。
$onChanges生命周期挂钩使用版本1.5.3 ，AngularJS将$onChanges生命周期挂钩添加到$compile服务。
来自文档：
控制器可以提供以下充当生命周期钩子的方法：
- $ onChanges（changesObj） - 每当更新单向（
<）或插值（@）绑定时调用。changesObj是一个哈希，其键是已更改的绑定属性的名称，值是{ currentValue: ..., previousValue: ... }形式的对象。使用此挂钩触发组件内的更新，例如克隆绑定值以防止外部值意外突变。— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks
$onChanges挂钩用于通过<单向绑定对组件的外部更改做出反应。 ng-change指令用于通过ng-model绑定来传播组件外&控制器的更改。
$doCheck生命周期挂钩使用版本1.5.8 ，AngularJS将$doCheck生命周期挂钩添加到$compile服务。
来自文档：
控制器可以提供以下充当生命周期钩子的方法：
$doCheck()- 在摘要周期的每个回合调用。提供检测和处理更改的机会。必须从此挂钩调用您希望采取的任何响应您检测到的更改的操作;实现这一点对于调用$onChanges时没有影响。例如，如果您希望执行深度相等性检查或检查Date对象，则此挂钩可能很有用，Angular的更改检测器无法检测到这些更改，因此不会触发$onChanges。这个钩子没有参数调用;如果检测到更改，则必须存储先前的值以与当前值进行比较。— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks
require 指令可以require其他指令的控制器以实现彼此之间的通信。这可以通过为require属性提供对象映射来在组件中实现。对象键指定属性名称，在该属性名称下，所需的控制器（对象值）将绑定到需求组件的控制器。
app.component('myPane', {
transclude: true,
require: {
tabsCtrl: '^myTabs'
},
bindings: {
title: '@'
},
controller: function() {
this.$onInit = function() {
this.tabsCtrl.addPane(this);
console.log(this);
};
},
templateUrl: 'my-pane.html'
});
有关详细信息，请参阅AngularJS Developer Guide - Intercomponent Communicatation
例如，如果您的服务处于保持状态，那么该怎么办？如何将更改推送到该服务，页面上的其他随机组件是否知道这种更改？最近一直在努力解决这个问题
使用RxJS Extensions for Angular构建服务。
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
var app = angular.module('myApp', ['rx']);
app.factory("DataService", function(rx) {
var subject = new rx.Subject();
var data = "Initial";
return {
set: function set(d){
data = d;
subject.onNext(d);
},
get: function get() {
return data;
},
subscribe: function (o) {
return subject.subscribe(o);
}
};
});
然后只需订阅更改。
app.controller('displayCtrl', function(DataService) {
var $ctrl = this;
$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});
this.$onDestroy = function() {
subscription.dispose();
};
});
客户可以使用DataService.subscribe订阅更改，生产者可以使用DataService.set推送更改。
答案 1 :(得分：8)
$watch对象在$scope对象中可用，因此您需要在控制器工厂函数＆amp;中添加$scope。然后将观察者放在变量上。
$scope.$watch(function(){
return myBox.game;
}, function(newVal){
alert('Value changed to '+ newVal)
});
<击>
注意：我知道您已将directive转换为component，以移除$scope的依赖关系，以便您获得更近了一步 Angular2。但似乎没有因为这种情况而被删除。
<强>更新
基本上角度1.5确实增加了.component方法jus区分两种不同的功能。与component类似。代表添加selector的特定行为，其中directive代表向DOM添加特定行为。指令只是.directive DDO（指令定义对象）上的包装方法。只有你能看到的是，他们在使用link/compile方法时删除了.component函数，你有能力获得角度编译的DOM。
使用Angular组件生命周期钩子的$onChanges / $doCheck生命周期钩子，这些钩子将在Angular 1.5.3+版本之后可用。
$ onChanges（changesObj） - 每当更新绑定时调用。 changesObj是一个哈希，其键是绑定属性的名称。
$ doCheck（） - 绑定更改时，在摘要周期的每个回合调用。提供检测和处理变更的机会。
在组件内部使用相同的功能将确保您的代码兼容移动到Angular 2。
答案 2 :(得分：4)
对于对我的解决方案感兴趣的任何人，我最终都会使用RXJS Observables，当你到达Angular 2时，你将不得不使用它。这是组件之间通信的一个工作小提琴，它让我可以更好地控制什么到观看。
class BoxCtrl {
constructor(msgService) {
this.msgService = msgService
this.msg = ''
this.subscription = msgService.subscribe((obj) => {
console.log('Subscribed')
this.msg = obj
})
}
unsubscribe() {
console.log('Unsubscribed')
msgService.usubscribe(this.subscription)
}
}
var app = angular
.module('app', ['ngMaterial'])
.controller('MainCtrl', ($scope, msgService) => {
$scope.name = "Observer App Example";
$scope.msg = 'Message';
$scope.broadcast = function() {
msgService.broadcast($scope.msg);
}
})
.component("box", {
bindings: {},
controller: 'BoxCtrl',
template: `Listener: </br>
<strong>{{$ctrl.msg}}</strong></br>
<md-button ng-click='$ctrl.unsubscribe()' class='md-warn'>Unsubscribe A</md-button>`
})
.factory('msgService', ['$http', function($http) {
var subject$ = new Rx.ReplaySubject();
return {
subscribe: function(subscription) {
return subject$.subscribe(subscription);
},
usubscribe: function(subscription) {
subscription.dispose();
},
broadcast: function(msg) {
console.log('success');
subject$.onNext(msg);
}
}
}])
答案 3 :(得分：2)
关于使用ng-change的小问题，与已接受的答案一起使用，以及1.5角组件。
如果您需要观看ng-model和ng-change不起作用的组件，可以将参数传递为：
使用哪个组件的标记：
<my-component on-change="$ctrl.doSth()"
field-value="$ctrl.valueToWatch">
</my-component>
组件js：
angular
.module('myComponent')
.component('myComponent', {
bindings: {
onChange: '&',
fieldValue: '='
}
});
组件标记：
<select ng-model="$ctrl.fieldValue"
ng-change="$ctrl.onChange()">
</select>
答案 4 :(得分：0)
在IE11，MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver中可用。你需要向控制器中注入$ element服务，这会破坏DOM /控制器分离，但我觉得这是angularjs中的一个基本异常（即缺陷）。由于hide / show是异步的，我们需要on-show回调，即angularjs＆amp; angular-bootstrap-tab不提供。它还要求你知道你想要观察哪个特定的DOM元素。我使用了angularjs控制器的以下代码来触发Highcharts图表回流显示。
const myObserver = new MutationObserver(function (mutations) {
const isVisible = $element.is(':visible') // Requires jquery
if (!_.isEqual(isVisible, $element._prevIsVisible)) { // Lodash
if (isVisible) {
$scope.$broadcast('onReflowChart')
}
$element._prevIsVisible = isVisible
}
})
myObserver.observe($element[0], {
attributes: true,
attributeFilter: ['class']
})
答案 5 :(得分：0)
真的很好接受了答案，但我可以补充一点，你也可以使用事件的力量（有点像Qt信号/插槽，如果你愿意）。
广播事件：$rootScope.$broadcast("clickRow", rowId)
由任何父母（甚至儿童控制者）。
然后在您的控制器中，您可以像这样处理事件：
$scope.$on("clickRow", function(event, data){
// do a refresh of the view with data == rowId
});
你也可以添加一些这样的日志记录（取自这里：https://stackoverflow.com/a/34903433/3147071）
var withLogEvent = true; // set to false to avoid events logs
app.config(function($provide) {
if (withLogEvent)
{
$provide.decorator("$rootScope", function($delegate) {
var Scope = $delegate.constructor;
var origBroadcast = Scope.prototype.$broadcast;
var origEmit = Scope.prototype.$emit;
Scope.prototype.$broadcast = function() {
console.log("$broadcast was called on $scope " + this.$id + " with arguments:",
arguments);
return origBroadcast.apply(this, arguments);
};
Scope.prototype.$emit = function() {
console.log("$emit was called on $scope " + this.$id + " with arguments:",
arguments);
return origEmit.apply(this, arguments);
};
return $delegate;
});
}
});
答案 6 :(得分：0)
我迟到了。但这可以帮助另一个人。
app.component("headerComponent", {
templateUrl: "templates/header/view.html",
controller: ["$rootScope", function ($rootScope) {
let $ctrl = this;
$rootScope.$watch(() => {
return $ctrl.val;
}, function (newVal, oldVal) {
// do something
});
}]
});