AngularJS来自自定义指令

呼叫服务，我有我AngularJS内部应用程序下面的指令，服务和控制器。该服务在指令和此控制器（以及在我的应用程序中使用相同服务的其他控制器）之间通用。如控制器内部所示，我观察服务的变化，而在指令中，我与服务进行通信以更新它。出于某种原因，我不知道该指令没有更新我的服务，所以有人可以告诉我什么，我做错了什么？由于AngularJS来自自定义指令

控制器：

myapp.controller('ClientsCtrl', function ($scope, UserSvc) { 
    $scope.showForm = UserSvc.frmOpened; 
    $scope.$watch(function() { 
     return UserSvc.frmOpened; 
    }, function() { 
     $scope.showForm = UserSvc.frmOpened; 
     console.log('Changed... ' + $scope.showForm); 
    }); 
});

服务

myapp.factory('UserSvc', function ($log, $q, $http) { 
    return { 
     frmOpened: false 
    }; 
});

指令：

myapp.directive('myDirective', ['UserSvc', function (UserSvc) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      angular.element(element).on("click", function() { 
       var parentElement = $(this).parent(); 
       if (parentElement.hasClass('sample')) UserSvc.frmOpened = true; //This code never update the service 
      } else { 
       UserSvc.frmOpened = false; //This code never update the service 
      } 
      return false; 
      }); 
    } 
}; 
}]);

来源

2014-04-24 MChan

.on()是一个jQuery方法（也包括在角的jqLite）。附加的事件处理程序中的代码居住的角度之外，所以你需要使用$适用于：

$适用（）用于从角框架之外的角度来执行的表达式。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在调用角度框架，我们需要执行适当的范围生命周期异常处理，执行手表。

例如：

element.on("click", function() { 

    var parentElement = $(this).parent(); 

    scope.$apply(function() { 
    if (parentElement.hasClass('sample')) { 
     UserSvc.frmOpened = true; 
    } else { 
     UserSvc.frmOpened = false; 
    } 
    }); 

    return false; 
});

演示：http://plnkr.co/edit/mCl0jFwzdKW9UgwPYSQ9?p=preview

此外，在链接功能的element已经是一个jqLite/jQuery的包裹元件，没有必要对其执行angular.element()再次。

来源

2014-04-24 14:24:24 tasseKATT

非常感谢，现在的工作，但有一个滞后（如1-2次，但很明显）的时候我与指令和表单的按钮点击显示基于对控制器的更改showForm之间，所以你碰巧知道这是由于使用手表NG-秀监控对showForm或者是由于应用或整个结构本身？由于 – MChan

对不起，真的很难说没有看到所有涉及的代码。 – tasseKATT

它看起来像你有一些括号，他们不应该在你的指令。您的if语句的第一部分没有括号，但在其他部分之前有一个右括号。我认为这会弄乱一些东西。

尝试使用这个作为你的链接功能，看看它是否改变任何东西：

link: function (scope, element, attrs) { 
      angular.element(element).on("click", function() { 
       var parentElement = $(this).parent(); 
       if (parentElement.hasClass('sample')) { 
        UserSvc.frmOpened = true; //Surrounded this with brackets 
       } else { 
        UserSvc.frmOpened = false; 
       } 
       return false; 
      }); 
     }

来源

2014-04-24 14:23:13

AngularJS来自自定义指令

回答

相关问题