angular 没有加载我的指令

Question

我刚开始使用 angular.but 我在加载指令时遇到了一些问题。我想在页面加载后立即加载我的指令。

我在哪里加载数据显示指令

        <div class="row">
        <div class="col-md-12">
            <article class="row" ng-controller="DataCtrl">
                <input type="button" ng-click="getDataList()" >
                <h1>Some Content Here</h1>
                <ul id="home" bread-crumbs></ul>
                <ul class="thumbnails">
                    <li ng-repeat="data in list" class="col-md-5">
                        <show-data data="data"/>
                    </li>
                </ul>
            </article>
        </div>
    </div>

showData 指令：

app.directive('showData', function () {
return{
    restrict: 'E',
    replace:true,
    templateUrl: 'views/directives/datas.directive.html',
    scope: {
        data: "="
    },
    controller:'DataCtrl'

}

})

我用的模板：

    <div class="well hoverwell">
    <div class="row">
        <h2 class="col-md-4">{{data.name}}</h2>
    </div>
    <div class="row">
        <span class="col-md-1">Code:</span>
        <span class="col-md-1">{{data.id}}</span>
    </div>
    <div class="row">
        <span class="col-md-1">accountability:</span>
        <span class="col-md-1">{{data.parent}}</span>
    </div>
    <div class="row">
        <span class="col-md-1">&nbsp;:</span>
        <span class="col-md-1">{{data.definition}}</span>
    </div>
</div>

和我的控制器

'use strict';

angular.module('app')
    .controller('DataCtrl', function ($scope, DataService, $log) {

        $scope.getDataList = function () {
            var list = DataService.getDataList(1);
            list.then(
                function (result) {
                    $log.info(result);
                    $scope.dataList = result;

                }, function (status) {
                    $log.error(status)
                    $scope.msg = "error " + status + " has been occur,please report to admin ";
                });
        };

    });

当我运行我的应用程序无法运行时。当我在 chorome 开发工具中观看它时，我的指令是 comment

我的是什么 problem.How 我可以在页面加载后立即调用此指令吗？谢谢

Answer 1

正如您已经注意到的，您看到的是空列表，因为 ng-repeat 中的 dataList 尚未填充。

但是你的代码有一些错误：

首先 - 你不应该使用一个控制器两次。所以你需要为你的指令创建单独的控制器。
replace 指令参数已弃用，最好不要使用它。
在您的 DataCtrl 中，您设置了 dataList 变量：$scope.dataList = result;，但在 HTML 中，您引用了 list 变量：<li ng-repeat="data in list" class="col-md-5"> .

也许 example 可以帮助您理解代码。

angular 没有加载我的指令

angular does not load my directive

angularjs

angularjs-directive