範圍變更不執行指令代碼

這裏是我的指令是什麼樣子範圍變更不執行指令代碼

//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工作

請幫助

來源

2013-08-26 daydreamer

你做幾個錯誤：

您的通知標記必須是內部控制器（在HTML），因爲它必須能夠訪問「消息」變量。
您的指令中的綁定是錯誤的：您必須使用'='而不是'@'（正如Thalis所說）。
您的指令中不存在變量'message'，您必須使用scope.ngModel（綁定到您的消息變量）。
每次您的變量將被更新時，您的守望者中給出的回調將被執行。既然你使用了一個對象，當你的變量引用改變時，監視器將被執行。您必須爲您的觀察者的第三個參數設置「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-26 14:19:35 Mickael

這是有益的，但它不工作每當我更改文本框中的值時，它都可以正常工作一旦。嘗試多次嘗試，你會發現它不起作用 – daydreamer

我的不好，它正在工作。感謝您的詳細回覆 – daydreamer

它不起作用，因爲您的變量永遠不會改變，請嘗試設置輸入值而不是「hello」:) – Mickael

我相信，在你的指令定義你需要：

ngModel: '='

代替：

ngModel: '@'

如果你想使用 '@'，你的觀點應該是：

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

而且在你$watch你應該留意ngModel，而不是message。

來源

2013-08-26 14:00:42

範圍變更不執行指令代碼

回答

相關問題