为angularjs中的指令中的可选属性提供默认值

Question

我试图给具有可选属性的指令赋予默认值。我在scope.init（）方法中给出默认值，如下所示。我没有看到我在视图中反映的默认值。如果我尝试做范围。$ apply（），它说它已经消化了:)我做错了什么？

angular.module('noi.questionOptions', ['noi.filters'
  //'ui.bootstrap'
]).directive('noiQuestionOptions', ['$filter', '$log', function($filter, $log){
    'use strict';

    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var romans = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix','x'];
    return {
        restrict: 'EA',
        scope: {
            // have .text attribute and optionall index 
            options: "=noiOptions",
            // default ) 
            separator: '@?noiSeparator',
            // one of alpha, numeric, roman, defaults to numeric
            indexType: '@?noiIndexType',
            // vertical or horizaontal, default horizontal
            orientation: '@?noiOrientation',
            // upper or lower, default upper
            indexCase: '@?noiIndexCase'
        },
        templateUrl: 'noi.questionOptions.html',
        controller: function($scope, $element, $attrs){
            var scope = $scope;            
            scope.isIndexUpper = function(){
                return scope.indexCase == 'lower' ? false : true;
            };
            scope.isHorizontal = function(){
                return scope.orientation == 'vertical' ? false : true;
            };
            scope.init = function(){
                if (!angular.isDefined($scope.indexCase)) {
                    $scope.indexCase = 'upper';               
                };

                if (!angular.isDefined($scope.separator)) {
                    $scope.separator = '.';
                    //scope.separator = ')';
                }

                if (!angular.isArray($scope.options)) {
                    //$log.log('not array');
                    return;
                }
                angular.forEach($scope.options, function(opt, i){
                    if (angular.isDefined(opt.index)) {
                        //return;
                    }                    
                    if ($scope.indexType == 'roman') {
                        opt.index = romans[i];
                    } else if ($scope.indexType == 'alpha') {
                        opt.index = letters[i];
                    } else {
                        opt.index = i;
                    }                    
                });
            };
            scope.init();
            //$log.log("aaa" + scope.options); 

            $log.log(scope.options);
            //scope.$apply();
        },
        link: function(scope, element, attrs) {



        }
    };
}]);

这是模板

<ul class="list-unstyled " ng-class="{'list-inline':isHorizontal()}">
    <li ng-repeat="opt in options"> {{opt}}
        <span ng-class="{'text-uppercase':isIndexUpper(), 'text-lowercase':!isIndexUpper()}"
              >{{opt.index}} {{ separator}}</span> {{opt.text}}
    </li>
</ul>
{{separator}} - {{indexType}} - {{orientation}} - {{indexCase}} - {{options}}  

/ ul下的这些表达式（{{options}}除外）没有显示任何内容。 {{options}}不会显示我在上面的forEach循环中添加的.index属性。但是，我可以在控制台上看到选项具有.index属性

---实际模板js文件---（加载模板没问题）

angular.module('erdal').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('noi.questionOptions.html',
    "<ul class=\"list-unstyled\" ng-class=\"{'list-inline':isHorizontal()}\"><li ng-repeat=\"opt in options\">{{opt}} <span ng-class=\"{'text-uppercase':isIndexUpper(), 'text-lowercase':!isIndexUpper()}\">{{opt.index}} {{ separator}}</span> {{opt.text}}</li></ul>{{separator}} - {{indexType}} - {{orientation}} - {{indexCase}} - {{options}}"
  );

}]);

这是包含指令

的dom

<div data-noi-question-options     
     noi-options="[{text:'ankara'}, {text:'Istanbul'}, {text:'Antalya'}, {text:'Izmir'}]" 
                 ></div>

Answer 1

我删除了整个scope.init（）...并将其替换为这些

scope.$watch('indexType', function(newVal, oldVal, scope){
        //console.log(newVal + ' ' + oldVal);
        if (!angular.isDefined(newVal)){
            scope.indexType = 'upper';
        }
    });
    scope.$watch('separator', function(newVal, oldVal, scope){
        //console.log(newVal + ' ' + oldVal);
        if (!angular.isDefined(newVal)){
            scope.separator = ')';
        }
    });

    scope.$watch('options', function(newVal, oldVal, scope){
        if (!angular.isArray(scope.options)) {
            //$log.log('not array');
            return;
        }
        angular.forEach(scope.options, function(opt, i){
            if (angular.isDefined(opt.index)) {
                return;
            }                    
            if (scope.indexType == 'roman') {
                opt.index = romans[i];
            } else if (scope.indexType == 'alpha') {
                opt.index = letters[i];
            } else {
                opt.index = i;
            }                    
        });
    });

在此页面上有关同一问题的非常好的解释.. https://groups.google.com/forum/#!msg/angular/lA2oXI8-PdY/N-0dAQ4c1G4J

简而言之，插值属性在摘要周期后设置，并且覆盖了我的默认值。