Question

我正在使用AngularJS在UI上工作并从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')
            ....

我们的想法是，点击Sub Step 1按钮，我将显示.sub-step(sub-step name='sub-step-1')的视图。但是我目前的问题是link指令上的subStep没有被调用，这意味着子步骤没有在控制器中注册，isActive()也没有被调用由子步ng-show属性调用。

按钮工作正常。我的印象是transclude - 子步骤允许他们看到＆＃39; StepCtrl范围，因此可以调用isActive和/或推送到substeps，但事实并非如此。

奇怪的是，compile 上的subStep被调用，正常工作。没有编译器错误，link上的subStep根本没有被调用。

做什么？

Answer 1

原来，compile必须返回link。有一些我没想到的东西。

为什么编译被调用，但链接不是？

1 个答案: