Angular + Selectize 在表单创建中获取值答案

【问题标题】：Angular + Selectize get value in form createAngular + Selectize 在表单创建中获取值
【发布时间】：2014-03-30 23:40:24
【问题描述】：

我正在使用一个非常简单的 Angular 指令来合并 selectize：

https://github.com/paolodm/angular-selectize/blob/master/angular-selectize.js

app.directive('selectize', function( $timeout ) {
    return {
        link: function( $scope, element, attrs ) {
            $timeout(function() {
                $(element).selectize($scope.$eval(attrs.selectize))
            })
        }
    };
});

我的整个表格如下：

<form>
    <input id="title" type="text" ng-model="post.title" />

    <select placeholder="Tags"
        ng-options='tag.name for tag in tags'
        ng-model='post.tags'
        selectize="{ maxItems: 3 }"
        multiple></select>

    <button ng-click="create( post )">create</button>
</form>

Selectize 已正确连接。

但是，在我的创建函数中，我得到了post.title，仅此而已。

$scope.tags = [{
    id: 1,
    name: 'Tag1'
}, {
    id: 2,
    name: 'Tag2'
}];

$scope.create = function( post ) {

    console.log( 'post: ', post );

};

// logs {title: 'input value'}

如果我删除 selectize() 调用，使其成为一个普通的 html 元素，并留下 ng-model="post.tags" 它可以工作，我得到标签的预期值。

在没有 selectize 指令的情况下，我可以在控制台中运行 $('select').val() 并正确返回 [ "1", "2" ] 例如，这是我想要的标签的 id。他们只是不会通过 selectize 发送到 create。

怎么了？

【问题讨论】：

标签： angularjs selectize.js

【解决方案1】：

我是 Angular/selectize 的新手，但我认为你的指令只有在你的选项被硬编码时才有效，例如：

<select ...>
    <option value="1">Option1</option>
    ...
    <option value="n">OptionN</option>
</select>

否则，Selectize 可能在 ng-options 创建它们之前被实例化。因此，我使用here is the directive。

【讨论】：