1

这是我的指令的样子

//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);
            });
        }
    }
});

这是我的控制器

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>

我想要什么
- 每当值scope.message发生变化时NotificationController，指令都有新值，以便我可以在网页上提醒它

什么我不明白
似乎我不明白$scope.$watch是如何工作的

请帮忙

4

2 回答 2

2

你犯了几个错误：

  1. 您的通知标签必须在控制器内（在 html 中），因为它必须有权访问“消息”变量。
  2. 您在指令中的绑定是错误的：您必须使用“=”而不是“@”（如 Thalis 所说）。
  3. 您的指令中不存在变量“消息”，您必须使用 scope.ngModel（绑定到您的消息变量）。
  4. 每次更新变量时，都会执行观察者中给出的回调。由于您使用对象，因此当您的变量引用更改时将执行观察者。您必须将“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));
    };
}]);

看到这个小提琴：http: //jsfiddle.net/77Uca/15/

于 2013-08-26T14:19:35.493 回答
0

我相信在您的指令定义中，您需要：

ngModel: '='

代替：

ngModel: '@'

如果你想使用'@'，你的视图应该是：

<notification data-ng-model="{{message}}"></notification>

同样在你的$watch你应该注意ngModel而不是message。

于 2013-08-26T14:00:42.173 回答