范围变更不执行指令代码

这里是我的指令是什么样子范围变更不执行指令代码

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

范围变更不执行指令代码

回答

相关问题