Question

以下是我正在做的事情的一般概念：

<html ng-app="myapp">
<head>...</head>

<body>

<select class="form-control" ng-model="change_group" change-group>
    <!-- options loaded in from Symfony/twig -->
    <option value='0'>lala</option>
    <option value='1'>bla</option>
</select>

<div ng-view></div>

</body>
</html>

当所有加载时，指令似乎工作，并且我可以在更改选择时触发它;但它创建了一个空选项，而我似乎无法预先选择现有选项，而不是生成一个空选项并将其设置为默认选项。

myapp.directive('changeGroup', function() {
    return {
        restrict: 'A',
        require: "ngModel",
        scope: { },
        controller: function($scope) {
            $scope.change_group = 0;
        },
        link: function(scope, element, attrs, ngModel) {            
            ngModel.$viewChangeListeners.push(function() {
                console.log('changed');
            });
        }
    };
});

当我加载页面时，所需的选项（0）闪烁一瞬间，然后返回空选项。

在角度插入空选项后，这就是选择的样子：

<select class="form-control ng-pristine ng-valid ng-isolate-scope ng-touched" ng-model="change_group" change-group="">
    <option value="? undefined:undefined ?"></option>
    <option value="0">Public</option>
    <option value="1">xil3</option>
</select>

Answer 1

删除scope: {}，因为这会创建一个新的隔离范围，我认为您正在丢失change_group范围变量。

Answer 2

初始化为字符串;不是数字。

也不使用范围;不孤立范围。

angular.module("app",[]).directive('changeGroup', function() {
    return {
        restrict: 'A',
        require: "ngModel",
        //Do not use isolate scope
        //scope: {},
        controller: function($scope,$element) {
            //Initialize to string
            $scope.change_group = '1';
            //Not to a number
            //$scope.change_group = 1;
        },
        link: function(scope, element, attrs, ngModel) {            
            ngModel.$viewChangeListeners.push(function() {
                console.log('changed');
            });
        }
    };
});

DEMO on JSFiddle。

控制器范围之外的自定义选择指令 - 生成空选项

2 个答案: