这是我的指令的样子
//noinspection JSCheckFunctionSignatures
angular.module('notificationDirective', []).directive('notification', function ($timeout) {
//noinspection JSUnusedLocalSymbols
return {
restrict: 'E',
replace: true,
scope: {
ngModel: '@'
},
template: '<div class="alert fade" bs-alert="ngModel"></div>',
link: function (scope, element, attrs) {
scope.$watch('message', function () {
console.log('message now: ' + JSON.stringify(scope.message));
// element.show();
// //noinspection JSUnresolvedFunction
// $timeout(function () {
// //element.empty();
// element.fadeOut("slow");
// }, 2000);
});
}
}
});
这是我的 Controller
function NotificationController($scope) {
$scope.message = {};
console.log('notification activated');
$scope.invite = function() {
console.log("submitting invite for " + $scope.email);
$scope.message.title = 'hello';
// console.log('message now is ' + JSON.stringify($scope.message, null, 2));
}
}
我是这样用的
<form class="pure-form" data-ng-controller="NotificationController">
<input type="text" class="pure-input-1-2" placeholder="Email"
data-ng-model="email">
<button type="submit"
class="pure-button notice pure-button-xlarge"
data-ng-click="invite()">Invite me
</button>
</form>
<notification data-ng-model="message"></notification>
我想要的
- 每当 NotificationController 中的 scope.message 值发生变化时，指令就会有新值，这样我就可以在网页上提醒它
我不明白的地方
看来我不明白 $scope.$watch 是如何工作的
请帮忙
最佳答案
你犯了几个错误:
- 您的通知标记必须位于 Controller 内(在 html 中)，因为它必须能够访问“消息”变量。
- 您在指令中的绑定(bind)是错误的:您必须使用“=”而不是“@”(如 Thalis 所说)。
- 变量“message”在您的指令中不存在，您必须使用 scope.ngModel(绑定(bind)到您的 message 变量)。
- 每次更新变量时，都会执行观察者中的回调。由于您使用了一个对象，因此当您的变量引用发生变化时，观察者将被执行。您必须将“true”设置为观察者的第三个参数以检查对象是否相等)。
这是您的示例:
HTML:
<body>
<div id="my-app" data-ng-app="myApp">
<form class="pure-form" data-ng-controller="NotificationController">
<input type="text" class="pure-input-1-2" placeholder="Email" data-ng-model="email" />
<button type="submit"
class="pure-button notice pure-button-xlarge"
data-ng-click="invite()">Invite me
</button>
<notification data-ng-model="message"></notification>
</form>
</div>
</body>
Javascript:
var myApp = angular.module('myApp', []);
myApp.directive('notification', function() {
return {
restrict: 'E',
replace: true,
scope: {
ngModel: '='
},
template: '<div class="alert fade" bs-alert="ngModel"></div>',
link: function (scope, element, attrs) {
scope.$watch('ngModel', function () {
console.log('message now: ' + JSON.stringify(scope.ngModel));
// element.show();
// //noinspection JSUnresolvedFunction
// $timeout(function () {
// //element.empty();
// element.fadeOut("slow");
// }, 2000);
}, true);
}
}
});
myApp.controller('NotificationController', ['$scope', function($scope) {
$scope.message = {};
console.log('notification activated');
$scope.invite = function() {
console.log("submitting invite for " + $scope.email);
$scope.message.title = 'hello';
// console.log('message now is ' + JSON.stringify($scope.message, null, 2));
};
}]);
请参阅此 fiddle :http://jsfiddle.net/77Uca/15/
关于javascript - 范围更改不执行指令中的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18445401/