Question

我创建了两个指令（dirA，dirB）。 directiveA创建的范围变量不在directiveB中工作，也不在控制器范围内工作。

// DirectiveA

myApp.directive("directiveA", function () {

    return {
        restrict: "AE",
        replace: true,
        controller: 'myController',
        scope: {
            aData: "=aData",              //input to the directive
            cardData: "=cardData"      //input to the directive
        },
        link : function(scope, element, attr) {
             // some other code
        },
        templateUrl: 'directiveA.html'
    };
});

// DirectiveB

myApp.directive("directiveB", function () {

    return {
        restrict: "AE",
        replace: true,
        controller: 'myController',
        scope: {
            bData: "=bData",                   //input to the directive
            cardData: "=cardData"           //input to the directive
        },
        link : function(scope, element, attr) {
                 // some other code
        },
        templateUrl: 'directiveB.html'
    };
});

// directiveA.html

<div>
    <span>Head A</span>

<input type="range" name="work_one" min='0' max=5' step="1" data-ng-init="selectedA=0" data-ng-model="selectedA" data-ng -     change="getSupportBList(aData[selectedA]);" value="0" />
        {{supportBList}}                      //Getting Proper result as expected.
</div>

// myController.js

//........
$scope.getSupportBList= function(val) {
    $scope.supportBList= ['B1', 'B2', 'B3', 'B4'];
};
//........

// directiveB.html

<div>
    <div class="cardlabel">PortType</div>
    <div class="radio">
        <!-- portListData provided to directive as attribute -->
        <label class="radio-inline" data-ng-repeat="port in portListData">

            <input type="radio" name="optradio" value="{{ port }}" data-ng-model="cardData" />{{ port }}
        </label>
    </div>
</div>

现在，当我在控制器视图或directiveB.html模板中使用相同的{{supportBList}}时，它不会返回任何值。使用ng-inspector检查后，directiveA只有“supportBList”值。现在，如何在控制器视图中使“supportBList”可用？

非常感谢任何帮助。

Answer 1

您错过了 directiveB templateUrl

的单引号

 templateUrl: directiveB.html'

应改为

 templateUrl: 'directiveB.html'

AngularJS：使指令范围和控制器范围变量同步

1 个答案: