2014-09-19 40 views
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,但它似乎並非如此。

奇怪的是,compilesubStep被稱爲和正常工作。沒有編譯器錯誤,subStep上的link根本沒有被調用。

什麼?

回答

0

原來,compile必須返回link。有些事我沒有想到。

相關問題