Question

我在jQuery UI Accordion中构建了一个在标签旁边有复选框的指令：

    <ul class="checkbox-grid  employee-info-tabs">
        <li ng-repeat="column in columnsData">
            <div class="styleAvailableColumns">
                <input type="checkbox" ng-model="column.Selected" />
                <label class="list-columns">{{ column.ColumnDisplayName }}</label>
            </div>
        </li>
    </ul>

在我的控制器中，我希望能够保存用户在指令中选择的选项，但我不确定如何。

这是我的指示：

angular.module('component.column', [])
.directive('uiAccordion', function ($timeout, Columns, $location) {
    return {
        scope: {
            columnsData: '=uiAccordion'
        },
        templateUrl: '/scripts/app/directives/test.html',
        link: function (scope, element) {
            var generateAccordion = function () {
                $timeout(function () {   
                    $(element).accordion({
                        header: "> div > h3",
                        collapsible: true,
                        active: 'none'
                    });
                });
            }

        var loc = $location.absUrl();
        var reportId = loc.substring(loc.lastIndexOf('/') + 1);

        Columns.getAll(reportId).then(function (data) {
            scope.columnsData = data;
            generateAccordion();
        }

以下是我在视图<div ui-accordion="accordionData"></div>

中使用该指令的方法

我尝试使用scope: { '=' }，但获得Expression 'undefined' used with directive 'uiAccordion' is non-assignable!。

我已经做了一些其他的谷歌搜索，但我不是100％正确的'正确'方向如何实现这一目标。如果我能提供任何其他信息，请告诉我。

Answer 1

将指令范围设置为：

    scope: {
        columnsData: '='
    },

由于您希望控制器维护该数据，因此您的控制器应该引用$scope.columnsData。

然后，在使用控制器的视图上，您可以将其输入到指令中，如下所示：

<div ui-accordion columns-data="columnsData"> </div>

以下是您的控制器示例：

angular
  .module('...')
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.columnsData = "abcd123"
  }]);

Answer 2

尝试将您的指令用作：

<div ui-accordion="controllersColumnsData"></div>

其中controllersColumnsData是一个集合，您可以在控制器中迭代，其项目将从您的指令设置ColumnDisplayName和Selected属性。

在Controller中使用指令范围

2 个答案: