状态之间的Angularjs jquery绑定答案

【问题标题】：Angularjs jquery binding between states状态之间的Angularjs jquery绑定
【发布时间】：2015-04-27 20:49:13
【问题描述】：

假设我有两种状态：

.state('page1', {
    url: '/page1',
    templateUrl: 'pages/templates/page1.html',
    controller: 'page1'
})

.state('page2', {
    url: '/page2',
    templateUrl: 'pages/templates/page2.html',
    controller: 'page2'
})

它们都有<div id="clickme'>DO IT</div>元素。

在一个控制器中我有：

$("body").on('click', '#clickme', function(e) { alert("clicked"); });

但不在另一个控制器上。

如果我在不同的控制器中有很多单独的绑定，那么重新启动我的绑定最有效的方法是什么？

我不希望它们在我切换状态时处于活动状态，因为有些事情可能会重叠，或者只是想确保没有重叠。

【问题讨论】：

在 Angular 方式中，您不应该在控制器中进行 DOM 操作，但是对于您的问题，当加载新状态时，旧模板将被删除并加载新模板。
在极少数情况下您应该将 jQuery 与 Angular 一起使用。例如，如果您想侦听按钮单击事件，您将在元素上使用 ng-click，并在控制器中的范围内有一个在单击时调用的函数。不需要 jQuery。
啊，好吧，那我就这么做。抱歉，我是 Angular @DanielGimenez 的新手。
必读：thinking-in-angularjs-if-i-have-a-jquery-background
天哪，谢谢@charlietfl

标签： javascript jquery angularjs angular-ui-router

【解决方案1】：

最有效的方法是根本不这样做。正如 cmets 所指出的，您可能不应该在 Angular 代码中使用 jQuery。 Its just not the Angular way.

你可能想要的是一些directives:

.state('page1', {
    url: '/page1',
    template: '<page1>',
    controller: 'page1'
})

.state('page2', {
    url: '/page2',
    template: '<page2>',
    controller: 'page2'
})

然后在你的指令代码中你会得到类似的东西

.directive('page1', function() {
  return {
    template: '<div ng-click="doIt()">DO IT</div>',
    link: function($scope){
      $scope.doIt = function(){...}
    }
  };
});

【讨论】：