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>

私が欲しいもの- 値が変更された場合は
いつでも、ディレクティブに新しい値が含まれるため、Webページでそれを警告できますscope.messageNotificationController

わから
ないこと 仕組みを理解していないよう$scope.$watchです

助けてください

4

2 に答える 2

2

あなたはいくつかの間違いを犯しました:

  1. 「メッセージ」変数にアクセスする必要があるため、通知タグはコントローラー内 (html 内) にある必要があります。
  2. ディレクティブのバインディングが間違っています。「@」の代わりに「=」を使用する必要があります（タリスが言ったように）。
  3. 変数 'message' がディレクティブに存在しません。scope.ngModel (メッセージ変数にバインドされている) を使用する必要があります。
  4. ウォッチャーで指定されたコールバックは、変数が更新されるたびに実行されます。オブジェクトを使用するため、変数参照が変更されるとウォッチャーが実行されます。オブジェクトの等価性をチェックするには、ウォッチャーの 3 番目のパラメーターに「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 に答える