javascript - Angular Directive(指令)错误意外的字符串

Question

我正在尝试创建一个 Angular Directive(指令)来初始化 select2 , 该指令将用于如下的 select 标记中

<select ng-model="add.doctype" class="form-control select2" select2 append-to-body ng-options="x.tipe for x in ::Types">
    <option value=""></option>
</select>

指令是

(function() {
    'use strict';

    angular.module('myapp.theme')
        .directive('select2', select2);

    function select2() {
        return {
            $(".select2").select2({ theme: "bootstrap" });
        };
    }

})();

它在控制台中给出了一个错误 Unexpected string pointed to $(".select2").select2({ theme: "bootstrap"});，我错过了吗那里有什么？

Answer 1

正如 eschie 所指出的，您应该使用链接功能让您的代码正常工作。

然而，正如 eschie 所做的那样，使用指令是没有意义的/因为这个 JQuery 代码将选择所有具有类“select2”的元素，因为每次 angular 都会找到它时指令将被执行，angular 将找到 select2 类.

你应该这样做:

angular.module('myapp.theme').directive('select2', select2)
function select2() {
    return{
        restrict: 'A',
        link: function(scope, element, attr){
            $(element).select2({ theme: "bootstrap" });
        }
    }
}

请注意，我限制了属性。我注意到您的 select 标记中有 select2 作为类和属性。 以 Angular 方式，最好使用属性作为指令。如果您想保留第一类，请在指令中使用 restrict:'C'。