如何将数据传递给AngularJs HTML模板

时间:2016-06-01 17:55:22

标签: html angularjs ng-dialog

我有一个AngularJs HTML模板,但是模板会显示,但是没有填充<td>个标签。我想知道如何将组件JSON对象传递给模板。

<div>
    <h4>Alert</h4>
    <table class="table">
        <tr>
            <th>Type</th>
            <td>{{component.type}}</td>
        </tr>
        <tr>
            <th>Alert</th>
            <td>{{component.alert}}</td>
        </tr>
    </table>
</div>

我希望将数据传递给此模板,但我在这样做时遇到了麻烦。

data: $scope.component导致了这个问题。

$scope.components = 
    [
    {type: "Mobilizer",  alert:"mobilizer2 went down", status: "Down"},
    {type: "Dispacther", alert:"message rate is, status: "Problem"},
    {type: "Listener",   alert:"No Alert", status: "Up"},
    {type: "OutBound Charge", alert:"No Alert", status: "Up"}
];  

   $scope.openDialog = function(component) {
            ngDialog.open({
                templateUrl: 'handlebars/alert-template.html',
                data: $scope.component
            });
        };
    })

我的AngularJs视图调用函数:

  <tr ng-repeat="component in components | orderBy:'status'" ng-click="openDialog(component)">
  <td>{{component.type}}</td>
  <td ng-if="component.status == 'Up'" class="alert-success">{{component.status}}</td>
  <td ng-if="component.status == 'Problem'" class="alert-warning">{{component.status}}</td>
  <td ng-if="component.status == 'Down'" class="alert-danger">{{component.status}}</td>
  </tr>

1 个答案:

答案 0 :(得分:0)

 $scope.component = component;
        ngDialog.open({
            template: 'handlebars/alert-template.html',
            scope: $scope

我必须在我的函数中分配范围。