Question

我正在尝试创建一个初始化select2的angular指令，该指令将在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指向$(".select2").select2({ theme: "bootstrap" });的控制台中发出了错误，我错过了什么吗？

Answer 1

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

然而，正如eschie所做的那样，没有必要使用指令/因为这个JQuery代码会选择所有带有类的元素＆＃39; select2＆＃39;因为每次angular都会找到select2类，所以每次angular会找到它，因为指令将被执行。

你应该这样做：

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

请注意，我限制了属性。我注意到你的select标签中有select2作为一个类和一个属性。以角度方式，最好使用属性作为指令。如果你想让一个类在指令中使用restrict:'C'。

Answer 2

1）检查以确保jQuery包含在我们的项目中。

2）初始化要用作类选择器的指令。来自Angular的指令文档：

注意：创建指令时，默认情况下仅限于属性和元素。要创建由类名触发的指令，您需要使用restrict选项。

3）将你的逻辑放在指令的链接功能中：

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

function select2() {
    return{
        restrict: 'C',
        link: function(){
            $(".select2").select2({ theme: "bootstrap" });
        }
    }
}

Angular指令错误意外字符串

2 个答案: