javascript - 当AngularJS完成编译他的 View 时，如何在JS中定义？

Question

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

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

它不会工作，因为 AngularJS 完成编译后 id="selectable" 将可见。将此代码插入 Controller 中是错误的想法(做到了)。

Answer 1

您应该使用指令

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

在你看来

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

我还没有测试过，但应该可以

我推荐该指令，但如果您想在使用 ui-router 时检测 View 何时加载

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

请记住，每次状态发生变化时都会加载此代码