AngularJS完成视图编译后，如何在JS中定义？

Question

我需要为AngularJS View模板中定义的元素调用一些JQ插件，例如，何时调用

   $(function() {
    $( "#selectable" ).selectable();
});

它将不起作用，因为AngularJS完成编译后， id="selectable"将可见。 将此代码插入控制器错误的主意（正确）。

Answer 1

您应该使用指令

angular.module('module').directive('my-selectable', function(){
    return {
        link: function(scope, element, attrs) {
            $(element).selectable();
        }
    }
});

在你看来

<select my-selectable>
...
</select>

我尚未测试，但应该可以工作

我建议使用该指令，但是如果您要使用ui-router来检测何时加载视图，

$rootScope.$on('$viewContentLoaded', function(){
    $('selector').selectable();
});

请记住，每次状态更改时都会加载此代码

Answer 2

始终记住，在Angular Compile阶段中会发生DOM创建，因此与事件链接或DOM操作相关的任何事情在此阶段均不起作用。 这就是Angular提供链接阶段的原因，您可以在其中执行上述操作。 第二件事，在链接阶段，您总是会得到元素实例，因此无需在此块中使用$。 您随时可以直接使用它。

可能的解决方案是：

app.directive('myDirective', function() {
   return {
     ...,
     link: function(scope, element, attrs) {
        element.selectable();
     }
   }
});