Question

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

我加载data-show指令

        <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开发工具中观看时，我的指令是评论

enter image description here

我的问题是什么。如果页面加载，我怎么能调用这个指令。 THX

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不加载我的指令

1 个答案: