自定义指令突出显示按

Question

尝试编写一个自定义指令，将按钮显示为一周中的日期

如下图所示。

这是我到目前为止所遇到的并且难以将ng-model绑定到指令。

最初，按钮为白色，具体取决于当前作为数组传递的模型

$scope.selectedDays = ["mon", "wed"];

对于上面的示例，周一和周三应以灰色突出显示。所有其他人都应该是白人。

有什么想法吗？

app.directive('daysDirective', function ($compile) {

    var days = [
        { key: "sun", display: "S"},
        { key: "mon", display: "M"},
        { key: "tue", display: "T"},
        { key: "wed", display: "W"},
        { key: "thurs", display: "T"},
        { key: "fri", display: "F"},
        { key: "sat", display: "S"}
    ];

    //var template =
    //     '  <div class="input-group">'+
    //     '      <button ng-repeat="day in days track by $index" ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">{{ day.display }}</button>' +
    //     '  </div>';

    var template =
         '  <div class="input-group">'+
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">S</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">M</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">T</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">W</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">T</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">F</button>' +
         '      <button ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">S</button>' +
         '  </div>';

    var linker = function (scope, element, attrs, ngModelCtrl) {

        element.html(template).show();
        $compile(element.contents())(scope);
    };

    return {
        require: 'ngModel',
        link: linker,
        replace: true,
        restrict: 'EA',
        scope: {
            model: '=ngModel'
        },
        controller: ['$scope', function ($scope) {
            $scope.days = days;
            var model = $scope.model;

            //$scope.selected = model[]
        }]
    };

});

Answer 1

您可以使用模板属性

来简化指令

app.directive('daysDirective', function () {
    return {
        require: 'ngModel',
        link: function(scope, element, attr, ngModelController) {
            //not required, unless you are actually going to use ngModelController
        },
        replace: true,
        restrict: 'EA',
        template: '  <div class="input-group">' +
                  '      <button ng-repeat="(key, day) in days track by $index"  ng-class="{\'btn btn-sm btn-white\': day.selected, \'btn btn-sm btn-grey\': !day.selected}">{{ day.display }}</button>' +
                  '  </div>',
        scope: {
            model: '=ngModel'
        },
        controller: ['$scope', function ($scope) {
            //this needs to move into your controller, because otherwise all instances will share the same instance of days, causing them to interfere with each other
            $scope.days = {
                sun: { display: "S"},
                mon: { display: "M"},
                tue: { display: "T"},
                wed: {display: "W"},
                thurs: { display: "T"},
                fri: { display: "F"},
                sat: { display: "S"}
            };


            $scope.$watchCollection('model', function(){
                //clear the selected attribute 
                for(var i in $scope.days) {
                    $scope.days[i].selected = false;
                }

                for(var i in $scope.model) {
                   $scope.days[$scope.model[i]].selected = true;
                }


            });
        }]
    };

});

您可以完全避免手表的复杂性：

app.directive('daysDirective', function () {

             var days = {
                sun: { display: "S"},
                mon: { display: "M"},
                tue: { display: "T"},
                wed: {display: "W"},
                thurs: { display: "T"},
                fri: { display: "F"},
                sat: { display: "S"}
            };
    return {
        require: 'ngModel',
        link: function(scope, element, attr, ngModelController) {
            //not required, unless you are actually going to use ngModelController
        },
        replace: true,
        restrict: 'EA',
        template: '  <div class="input-group">' +
                  '      <button ng-click="Toggle(day)" ng-repeat="day in days track by $index"  ng-class="{\'btn btn-sm btn-white\': isSelected(day.key), \'btn btn-sm btn-grey\': !isSelected(day.key)}">{{ day.display }}</button>' +
                  '  </div>',
        scope: {
            model: '=ngModel'
        },
        controller: ['$scope', function ($scope) {

            $scope.days = days;
            $scope.isSelected = function(day) {
                return $scope.model.indexOf(day) > -1

            }

            $scope.Toggle = function(day) {
                var idx = $scope.model.indexOf(day.key);
                if(idx > -1)
                    $scope.model.splice(idx, 1);
                }
                else {
                    $scope.model.push(day.key);
                }

            }


        }]
    };

});