Question

我将bootstrap-select（https://silviomoreto.github.io/bootstrap-select/）jquery控件包装到角度js 1.x指令中。

我将首先显示所有代码和标记，然后向您显示基本上出错的地方。

指令的模板：

<select id="{{name}}"
    class="form-control"
    ng-model="selectedOption"
    ui-jq="selectpicker"
    ui-options='{ iconBase: "famfamfam-flag", tickIcon: "fa fa-check" }'>
<option ng-repeat="o in data" value="{{o.id}}">{{o.label}}</option>

指令代码：

(function () {
appModule.directive('yesNoDeclineCombo', ['$timeout', 
    function ($timeout) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/yesNoDeclineCombo.cshtml',
            scope: {
                selectedOption: '=?',
                name: '@'
            },
            link: function ($scope, element, attrs) {
                $scope.data = app.consts.yesNoDeclineData;
                $scope.data.unshift({ id: null, label: 'Not Assigned' });

                //refresh combo
                $timeout(function () {
                    $(element).selectpicker('refresh');
                });

                $scope.$watch('selectedOption', function (newValue) {
                    $timeout(function () {
                        $(element).selectpicker('refresh');
                    }, 0);
                });
            }
        };
    }
]);

}）（）;

标记使用：

<yes-no-decline-combo selected-option="vm.specialDietId" ng-required="vm.isFieldRequired('SpecialDiet')" name="SpecialDiet"></yes-no-decline-combo>

标记渲染：

<select id="SpecialDiet" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-empty ng-invalid ng-invalid-required" ng-model="selectedOption" ui-jq="selectpicker" ui-options="{ iconBase: &quot;famfamfam-flag&quot;, tickIcon: &quot;fa fa-check&quot; }" selected-option="vm.specialDietId" ng-required="vm.isFieldRequired('SpecialDiet')" name="SpecialDiet" required="required" tabindex="-98">
<!-- ngRepeat: o in data --><option ng-repeat="o in data" value="" class="ng-binding ng-scope" selected="selected">Not assigned</option><!-- end ngRepeat: o in data --><option ng-repeat="o in data" value="1" class="ng-binding ng-scope">Yes</option><!-- end ngRepeat: o in data --><option ng-repeat="o in data" value="2" class="ng-binding ng-scope">No</option><!-- end ngRepeat: o in data --><option ng-repeat="o in data" value="3" class="ng-binding ng-scope">Decline To Answer</option><!-- end ngRepeat: o in data -->

请注意，“name”属性仅在HTML中的指令中添加，然后被复制到新的指令标记中。另外，您注意到HTML上的指令中添加的所有属性都被复制到渲染的选择控件中，如“ng-required”和“selected-option”。

为什么会这样？不仅应该呈现指令模板并将其绑定到我输入指令的任何数据吗？

由于

Angular js 1.x自定义指令 - 重复字段

0 个答案: