0
我正在使用AngularJS和從jQuery過渡的UI。 用戶界面本身是一個嚮導,其中一個步驟具有應按下按鈕來激活的子步驟。這是我目前的解決方案。爲什麼編譯調用,但鏈接不是?
AngularJS代碼
.controller('StepCtrl', function($scope) {
$scope.substeps = [];
$scope.activeStep = '';
$scope.isActive = function(stepName) {
// this is never called
return activeStep == stepName;
}
$scope.changeActiveStep = function(newStepName) {
$scope.activeStep = newStepName;
};
})
.directive('subStep', function() {
return {
transclude: true,
restrict: 'A',
link: function($scope, $element, $attrs) {
// this is never called
var name = $attrs.name;
$scope.substeps.push(name);
},
compile: function($element, $attrs) {
var stepName = $attrs.name;
$element.attr('ng-show', 'isActive(\''+stepName+'\')');
}
}
})
.directive('activateSubStep', function() {
return {
link: function($scope, $element, $attrs) {
var enabledStep = $attrs.activateSubStep;
$element.on('click', function() {
$scope.changeActiveStep(enabledStep);
});
}
};
})
JADE佈局
.step(ng-controller='StepCtrl')
p Pick an option
button.btn-default(activate-sub-step='sub-step-1') Sub-Step 1
button.btn-default(activate-sub-step='sub-step-2') Sub-Step 2
.sub-step(sub-step name='sub-step-1')
....
.sub-step(sub-step name='sub-step-2')
....
的想法是,通過點擊子步驟1按鈕,我將顯示.sub-step(sub-step name='sub-step-1')
的圖。但是我現在的問題是subStep
指令中的link
沒有被調用,這意味着子步沒有在控制器中註冊,並且isActive()
也沒有被子步驟ng-show
屬性調用。
這些按鈕工作正常。我的印象是transclude
-子步驟允許他們'看'StepCtrl
範圍,因此能夠調用isActive
和/或推送到substeps
,但它似乎並非如此。
奇怪的是,compile
上subStep
是被稱爲和是正常工作。沒有編譯器錯誤,subStep
上的link
根本沒有被調用。
什麼?