Question

很抱歉，如果这有一个非常明显的答案，我对Angular JS来说还是一个新手，这是我一直困扰着很长时间的事情。

为了给你一些背景知识，我在一个指令上调用ng-repeat，如下所示：

<div ng-controller = 'salesctrl'>
 <salecell ng-repeat = "kpi in kpis" kpi ="kpi"></salecell>
</div>

该指令描述如下：

.directive("salecell", function(){

    return{
        templateUrl: "sale-cell-template.html" ,
        restrict: 'E',  
        scope: {
            kpi: '='
        },
        link: function(scope){
            return scope;
        },

        controller: function($scope){

            if(typeof $scope.kpi != 'undefined'){

                $scope.kpi.value = 0;
                $scope.increment = function(){
                    $scope.kpi.value++;
                }

                $scope.decrement = function(){
                    if($scope.kpi.value != 0){
                        $scope.kpi.value--;
                    }
                }
            }

        }

    };
})

和附加的控制器：

    .controller("salesctrl", function($scope, $rootScope, SalesSvc){
    SalesSvc.query().$promise.then(function(data){
        $scope.kpis = data;
    });

    $scope.submit = function(){
        SalesSvc.save($scope.kpis).$promise.then(function(){
            for(var i = 0; i < $scope.kpis.length; i++){
                $scope.kpis[i].value = 0;
            }
        });
        $rootScope.$emit('salecreate');

    }
})

我遇到的问题是，无论我的关联模板的内容如何，都只渲染外部元素。例如，如果我有：

<tr>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
<div ng-show="!kpi.dollar" class="col-md-6">
    <div id="spinner4">
        <div class="input-group" style="width:150px;">
            <div class="spinner-buttons input-group-btn">
                <button ng-click="decrement()" type="button" class="btn spinner-up btn-warning">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
            <input ng-model="kpi.value" type="text" class="spinner-input form-control" maxlength="3" >
            <div class="spinner-buttons input-group-btn">
                <button ng-click="increment()" type="button" class="btn spinner-down btn-primary">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<div ng-show="kpi.dollar" class="col-md-6">
    <div class="input-group m-bot15" style="width: 150px;">
        <span class="input-group-addon">$</span>
        <input ng-model="kpi.value" type="text" class="form-control">
    </div>
</div>

页面上不会加载任何内容，同样，如果我有：

<tr>
  <h1> Hello World! </h1>
</tr>

也没有加载任何东西。

我已经检查过的事情： - 我确保定义了$ scope.kpis和$ scope.kpi - 我确保实际调用模板（通过检查元素和从模板中调用console.log） - 一些搜索建议它可能是模板中的错误，但这似乎很奇怪，因为即使使用近空模板它也不起作用。

我能想到的另一件事是，当我在元素检查器（Chrome）中可见的模板中使用console.log时，却没有其他内容。

如果你还需要其他任何东西，请告诉我，我再次希望这不是我错过的真正愚蠢的东西。

Answer 1

确保表格中的内容包含在<td>标记中。目前，它们直接位于<tr>标记内，且HTML格式无效。

<tr>
    <td>
        <div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
        ...
    </td>
</tr>

Angular html无法正确加载

1 个答案: