javascript - Angular 双向数据绑定(bind)隔离范围指令但属性未定义？

Question

您好，我想我不明白什么是双向数据绑定(bind)。首先是代码:

.directive('mupStageButtons', function() {
    return {
        transclude: true,
        template: '<span ng-transclude></span>',
        replace: true,
        scope: {
            property: "=",
            action: "="
        },
        controller: function($scope) {
            console.log($scope); //I can see the property of $scope defined in console
            console.log($scope.property); //undefined
            this.property = $scope.property;
            this.changeStage = $scope.action; //anyway this is ok
        },
    };
})
.directive('mupStageButton', function() {
    return {
        transclude: true,
        templateUrl: '/static/templates/directives/StageButton.html',
        require: '^^mupStageButtons',
        scope: {
            value: "=",
            btnClass: "@",
        },
        link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
            scope.property = mupStageButtonsCtrl.property;
            scope.changeStage = mupStageButtonsCtrl.changeStage;
        }
    };
})

//html

<mup-stage-buttons property="company.stage" action="setStage">
    <mup-stage-button value="0" btn-class="btn-default-grey">
    </mup-stage-button>
</mup-stage-buttons>


//controller for that html ^^^

.controller('CompanyDetailController', function($scope, $stateParams, Company){
    Company.query ({
      id : $stateParams.companyId
    }, function (data) {
      $scope.company = new Company(data);
    });
}

//template for <mup-stage-button>

<label ng-class="property === value ? 'active' : 'btn-on-hover' " class="btn {{btnClass}}" ng-click="changeStage(value)">
    <div ng-transclude></div>
</label>

“=”是否意味着，由于数据绑定(bind)，外部范围内的更改将传播？或不？因为我获取了一个 $resource 并且它当然是在获取之后定义的，但是“属性”仍然未定义。那有什么问题呢？

编辑:期望的行为是 <mup-stage-button> 模板中的 ng 类作品

编辑:plunker:https://plnkr.co/edit/drXxyMpd2IOhXMWFj8LP?p=preview

Answer 1

关于 transclude 选项，您遗漏了一件重要的事情:包装的内容绑定(bind)到 OUTER 范围，而不是指令的范围。

那么，编译后作用域绑定(bind)在您的案例中的外观如下:

<div ng-controller="CompanyDetailController">
    <mup-stage-buttons property="company.stage" action="setStage"> <-- even though the 'property' is bound correctly, it is not available below due to transclusion -->
        <span ng-transclude>
            {{company.stage}} <!-- CompanyDetailController $scope available here due to transclusion, 'property' is not available! -->

            <mup-stage-button property="company.stage" value="0"> 
                <!-- directive's scope here, binding to the outer scope's 'company.stage' can be used here -->
                {{property}} - {{value}} <!-- this will work -->
                <label ng-class="property === value ? 'active' : 'btn-on-hover' " class="btn {{btnClass}}" ng-click="changeStage(value)">
                    <div ng-transclude>
                        <!-- transcluded content here, bound to the CompanyDetailController $scope -->
                        not working ng-class 0
                    </div>
                </label>
            </mup-stage-button>
        </span>
    </mup-stage-buttons>
</div>

因此，要使您的代码正常工作 (Plunk)，只需将 property 映射到子指令上的 company.stage 就足够了。

更新

为了避免在子指令上重复绑定(bind) property="company.stage" 并分别通过父指令和子指令的 Controller 和链接函数传递数据，您应该使用 wrapping object 为您确定范围属性，以便您可以传递对该对象的引用。对此对象的任何更改都将对子作用域可用，因为它们将引用该对象，这称为点符号:

公司详细信息 Controller :

$scope.vars = {};
this.getCompany = function () {
  $scope.vars.company = $scope.company = {stage: 0}; 
};

然后将 vars 属性绑定(bind)到父指令的范围:

// ...
scope: {
    vars: '=',
},
controller: function($scope) {
    this.vars = $scope.vars;
}
// ...

然后将 vars 的引用放到子指令的范围内:

// ...
link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
    scope.vars = mupStageButtonsCtrl.vars;
}
// ...

并最终在子指令的 View 中访问它:

<label ng-class="vars.company.stage === value ? 'active' : 'btn-on-hover'">...</label>

这样就不需要在子指令实例上重复绑定(bind)。

Plunk已更新。