Question

我努力尝试，但我无法找到问题所在。

我创建了一个自定义指令，它应该迭代一些HTML以在屏幕上绘制正确的内容。

问题是我的ng-repeat没有迭代我的数组。我在stackoverflow上搜索，但我发现并没有帮助我。

这是我的指令（它在外部文件中）：

app.directive('logtab', function(){
    return {
        restrict: 'E',
        templateUrl: 'view/templates/log-tab.html',
        replace: true,
        controller: ['$scope', 'api', function($scope, api) {
            $scope.logState = false;
            $scope.logData = [1,2,3,4];

            $scope.loadLog = function() {
                api.doRequest({
                    path : $scope.path,
                    method : "GET",
                    broadcast : BK_LOG
                });
            };

            var bk = $scope.$on(BK_LOG, function(key, value){
                $scope.logState = true;
                console.log($scope.logData);

                bk();
            });
        }]
    };
});

以下是将呈现的指令HTML：

<md-tab ng-click="loadLog()" label="{{i18n['REVISIONS']}}">
    <div layout="row" layout-align="center" layout-padding ng-show="!logState">
        <div layout="column">
            <div>
                <md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
            </div>
            <div>
                {{i18n['LOG_LOAD']}}
            </div>
        </div>
    </div> 
    <div layout="row" ng-show="logState" layout-padding>
        <div layout="column">
            <div ng-repeat="xyz in logData">
                {{xyz}}
                SOME CONTENT HERE
            </div>
        </div>
    </div>
</md-tab>

提前致谢！

Answer 1

根据OP的解释更新了我的答案。

在这里创建了一个小提琴：https://jsfiddle.net/frishi/bzbbo5da/14/

我稍微简化了指令定义，删除了它的api部分。我还更改了指令的模板以包含它的ng-repeat部分。

    //....
    restrict: 'E',
    template: `<p><div ng-repeat="xyz in logData">
              {{xyz}}
              SOME CONTENT HERE
               </div></p>`,
    replace: false,
    scope: true, // <- needs to be set
    //....

您缺少指令定义对象中的scope参数。您必须为指令的模板将其设置为scope: true，以便能够访问在指令控制器范围内定义的变量。

Answer 2

您始终可以将控制器与指令分开：

app.directive('logtab', function(){
    return {
        restrict: 'E',
        templateUrl: 'view/templates/log-tab.html',
        replace: true,
        scope: {
            log: '='
        }
    };
});

然后在您的控制器中

app.controller('MyController', ['$scope', 'api', function($scope, api) {
    $scope.logTab = {
        state: false,
        data: [1, 2, 3, 4],
        loadLog: function() {
            api.doRequest({
                path : $scope.path,
                method : "GET",
                broadcast : BK_LOG
            });
        }
    };
    var bk = $scope.$on(BK_LOG, function(key, value){
        $scope.logTab.state = true;
        console.log($scope.logTab.data);

        bk();
    });
}]);

然后将您的HTML更改为：

<md-tab ng-click="log.loadLog()" label="{{i18n['REVISIONS']}}">
    <div layout="row" layout-align="center" layout-padding ng-show="!log.state">
        <div layout="column">
            <div>
                <md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
            </div>
            <div>
                {{i18n['LOG_LOAD']}}
            </div>
        </div>
    </div>
    <div layout="row" ng-show="log.state" layout-padding>
        <div layout="column">
            <div ng-repeat="xyz in log.data">
                {{xyz}}
                SOME CONTENT HERE
            </div>
        </div>
    </div>
</md-tab>

并用

调用它

<logtab log="logTab"></logtab>

Answer 3

我从指令代码中删除了其他组件，并将其保留在最低限度。代码正常工作正常。请参阅下文。

<强>的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body ng-app="myApp" >


    <logtab></logtab>

    <script src="angular.js" type="text/javascript  "></script>
    <script src="app.js" type="text/javascript  "></script>
</body>
</html>

<强> app.js

var myApp = angular.module('myApp', []);


myApp.directive('logtab', function(){
return {
    restrict: 'E',
    templateUrl: 'log-tab.html',
    replace: true,
    controller: ['$scope', function($scope) {
        $scope.logState = false;
        $scope.logData = [1,2,3,4];
        console.log('hi');
    }]
};

}）;

<强>登录tab.html

<div>
{{logData}}
    <div layout="row">
        <div layout="column">
            <div ng-repeat="xyz in logData">
                {{xyz}}
            </div>
        </div>
    </div>
</div>

请使用几个console.log来确定确切的位置。我怀疑指令的其他部分一定有问题，或者 logState设置为false ？

自定义指令中的Ng-repeat不重复

3 个答案: