javascript - 指令传递的值为空，异步数据加载仅在第二次单击后起作用

Question

我有一个指令，应该显示一些属于使用该指令的元素的列出日期。所以我想传递元素数据库 ID，然后在指令中加载数据。我有两个问题:

1) 由于某种原因，元素 id 没有被传递，该变量在指令内保持为空(它在指令之外不是空的，我检查过)

2)异步数据加载(使用固定的 pubId 值进行测试)仅在我第二次单击按钮后才起作用，而不是在第一次时...

<date-list pubId="pub.id"></date-list>

指令js:

app.directive('dateList', function() {
    return {
        restrict: 'E',
        scope: {
            pubId: '='
        },
        templateUrl: 'js/directives/dateList.html',
        controller: function($scope, $http) {
            $scope.dates = [];
            $scope.firstClick = true;
            $scope.loadDates = function(pubId) {
                if($scope.firstClick) {
                    $http({
                    url: "data/selectDates.php",
                    method: "POST",
                    data: 'pubId=' + pubId,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    })
                    .success(function(data) {
                        $scope.dates = data;
                    });
                    $scope.firstClick = false;
                }   
            };
        }
    };
});

指令模板:

<button type="button" ng-click="dateOpen = !dateOpen; loadDates(pubId)">Dates:</button>
<div uib-collapse="dateOpen">
    <span ng-repeat="date in dates">...</span>
</div>

Answer 1

您好，如果您有一个隔离范围，其中包含一个使用驼峰式大小写调用的属性，您应该使用破折号来使用该参数。示例:

scope: {
    myParam: '='
}

应该像这样使用:

<div my-param="data">

对于操作，为什么要在 ng-click 中嵌套函数和 bool 值切换？直接在函数内部切换 bool 值。其次，不需要传入参数。通过 scope 对象访问它:

$scope.loadDates = function() {
    $scope.pubId
}

第三件事，为什么使用controller而不是link。当您有需要相互通信的嵌套指令时，应使用 controller 函数。