html - Angular html 无法正确加载

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 :

    .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>