Question

我正在使用自定义指令将jQuery Chosen插件附加到多选元素。（我意识到有similar原生的AngularJS插件，但我想学习如何以正确的方式集成jQuery插件，因为我确信我最终会遇到只存在jQuery插件的要求。）

该元素已经绑定到作用域模型属性，并且在该指令中，我在此模型属性上附加了一个监视处理程序，以确保在更改时调用插件的更新/刷新函数。但是，我目前正在通过将模型属性的名称硬编码到指令中来实现这一点，这显然不是理想的。我希望该指令能够自行解决这个问题，以便它可以在各种情况下使用。我想我可以通过属性值将它传递给指令，但是如果指令足够智能，可以自己解决它。

是否有可从元素对象到其绑定范围模型属性的参考路径？

HTML：

<div ng-app="testApp" ng-controller="testController">
    <select multiple ng-model="selection" jquery-ng-chosen>
        <option value="1">First option</option>
        <option value="2">Second option</option>
    </select><br/>
    <button type="button" ng-click="selection = []">Clear</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

JS：

var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {

});
testApp.directive('jqueryNgChosen', function () {
    return {
        link: function (scope, element, attrs) {
            element.chosen();
            scope.$watch('selection', function () {
                element.trigger("chosen:updated");
            });
        }
    };
});

Fiddle。请注意，clear按钮正常工作，因为该指令使用了一个手表来更新jQuery选择的插件。（注意：jQuery JS和Chosen CSS链接被省略，因为它们是在jsFiddle中定义的。）

Answer 1

每当你创建一个像这样的可重用指令时，你一定要确定它的隔离范围（https://egghead.io/lessons/angularjs-understanding-isolate-scope）

在您的隔离范围对象中，您可以使用以下内容将ng-model属性的值绑定到指令范围：model：＆＃34; = ngModel＆＃34;然后你只需要观察你在指令范围内放置的模型属性。您可以选择通过传递true作为第3个参数来深入观察该属性，尽管在此示例中您不需要

testApp.directive('jqueryNgChosen', function () {
    return {
        scope: {
            'model': '=ngModel',
        },
        link: function (scope, element, attrs) {
            element.chosen();
            scope.$watch('model', function (newValue, old) {
                element.trigger("chosen:updated");
            }, true);
        }
    };
});

http://jsfiddle.net/z4vqxdtv/

Answer 2

要获取ng-model属性中的值，您可以像这样使用attrs.ngModel：

link: function (scope, element, attrs) {
  element.chosen();
  scope.$watch(attrs.ngModel, function () {
    element.trigger("chosen:updated");
  });
}

这样，您不必担心该属性实际上是ng-model，data-ng-model，ng:model还是其他变体。它将通过角度归一化。

希望这有帮助。

如何在AngularJS指令中引用元素的范围/模型属性？

2 个答案: