【问题标题】:Isolated scope member updated within link/controller but is undefined when passed to controller隔离范围成员在链接/控制器中更新,但在传递给控制器​​时未定义
【发布时间】:2025-12-25 05:20:16
【问题描述】:

我有以下代码:

HTML:

<body ng-controller="MainCtrl">
    <main-dir data="data" on-update-map="updateMap(datalength)"></main-dir>
</body>

JS:

app.directive('mainDir', function () {
    function DatasetDirective() {
        var directive = {};
        directive.restrict = "E";
        directive.replace = false;
        directive.scope = {
            data: "=",
            onUpdateMap: "&"
        };
        directive.templateUrl = 'dataset.html';
        directive.controller = function($scope){
          // set "datalength" on scope based on some logic here
          $scope.datalength = $scope.data.length;
          console.log($scope);
        };

        return directive;
    }
    return DatasetDirective();
});

数据集.html

<div>
    <button ng-click="onUpdateMap()">click me</button>
</div>

plnkr 在这里

基本上,我试图在指令的隔离范围内设置一个成员。然后单击指令模板中的按钮,我正在主控制器上执行包含指令的函数并将隔离范围的成员传递给函数。我希望将“3”传递给函数,但它的计算结果为“未定义”

我错过了什么吗?

【问题讨论】:

    标签: javascript angularjs angularjs-directive


    【解决方案1】:

    您需要从模板中传入datalength 作为键值对,基本上,您期望的任何参数的名称都应作为指令的键提供。

    <button ng-click="onUpdateMap({datalength:datalength})">click me</button>
    

    Plnkr

    【讨论】: