自定义模糊无法正常工作[AngularJS]

时间:2015-07-27 12:11:08

标签: javascript jquery angularjs

我正在尝试创建类似这样的通知:

http://plnkr.co/edit/GbFioFDNb2OC4ZjARQTp?p=preview

但是我在我的脚本中对它进行调解是不成功的,因为当我点击外面的通知框时没有任何事情发生。

这是我的剧本:

'use strict';
var app = angular.module('notifications',['ngRoute'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');


})
        .controller('NotificationController', function($scope, $http) {
            $http.get("/api/notification")
            .success(function (response) {
                $scope.notys = response;
            });

            $scope.notifications = {
                visible: false
              };
            $scope.showNotifications = function(flag) {
                $scope.notifications.visible = flag;
              };



          })
           .directive('customBlur', function(){
            return {
              restrict: 'A',
              scope: {
                'customBlur': '='
              },
              link: function(scope, element, attr) {
                element.on('click', function(event){
                  var targetAttr = angular.element(event.target).attr('custom-blur');
                  console.log(targetAttr);
                  if (typeof targetAttr !== 'undefined') {
                    scope.$apply(function(){
                      scope.customBlur = false;
                    });
                  } 
                });
              }
            };
          });

问题是,当我点击外部通知框时,如果我点击进入通知框,它会返回notification.visible,而不是返回undefined

结果为:console.log(targetAttr);

1 个答案:

答案 0 :(得分:0)

我在plunkr中运行了您的代码并尝试修复错误。 我发现只是你的模块名称和控制器名称不相同。

Uncaught Error: [$injector:modulerr] Failed to instantiate module demo due to:
Error: [$injector:nomod] Module 'demo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.2/$injector/nomod?p0=demo

此错误表示angular无法找到模块&#39; demo&#39;。所以我在这里对HTML进行了更改。这一行:

<html ng-app="notifications">

之后我收到了这个错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module notifications due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这表示您在angular.module('notifications',['ngRoute'], function($interpolateProvider) {使用的ngRoute不可用。所以我把它删除了。 (只是为了修复错误。)所以我对js进行了更改。这一行:

angular.module('notifications',[], function($interpolateProvider) {

ok之后我收到了这个错误:

Error: [ng:areq] Argument 'Ctrl' is not a function, got undefined
http://errors.angularjs.org/1.4.2/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined

其中说没有正确定义Ctrl。所以我再次对HTML进行了更改。这一行

 <body ng-controller="NotificationController">

确定。解决了所有这些后,我发现没有更多的错误。而你的掠夺者又开始工作了。 你可以在这里看到plunker:plunker

希望这会对你有所帮助。谢谢。