Question

我创建了简单的指令：

angular.module('app').directive('field', function () {
    return {
        restrict: 'E',
        template: '<div ng-click="clickElement()"><input id="{{inputId}}"></div>',
        scope: {
            inputId: '@'
        },
        controller: function ($scope) {

            if (!$scope.inputId) {
                $scope.inputId = 'abc';
            }

            function logId() {
                console.log($scope.inputId); // 'abc'
                console.log($scope); //$scope.inputId is undefined here (!!!)
            }

            logId();

            $scope.clickElement = function() {
                //$scope.inputId is undefined here
            }
        }
    }
});

然后我在没有inputId字段的情况下使用它：

<field></field>

当我使用指令时，我的$ scope.inputId是未定义的，但不是我想要的'abc'。为什么？如果在指令用法中未指定inputId，我该怎么做才能获得'abc'？

P.S。当postLink中的代码运行时的情况相同。

修改

木板：http://plnkr.co/edit/0mpcbrdUdafCMzATmCYZ?p=preview

丑陋的解决方法（以显示它必须如何工作）：http://plnkr.co/edit/G6gxQhgrteJBeNmR7yTX?p=preview

Answer 1

您可以在compile中设置默认属性，并避免分配到控制器中的范围。

compile: function(element, attrs) {
  if (!attrs.inputId) { attrs.inputId = 'abc'; }
},

删除代码设置默认值。

在controller和postLink初始化之后，在指令中重置范围变量;

1 个答案: