AngularJS绑定在包含ng的模板中不起作用

时间:2017-06-02 13:08:35

标签: angularjs angularjs-ng-include

创建动态面板时:

<div ng-controller="widgetCtrl">
  <div drag-group="widgets">
    <div class="panel panel-primary" ng-repeat="widget in widgets" draggable-widget="widget" draggable-widget-callback="moveWidget">
      <div class="panel-heading" ng-include="widget.header" draggable-widget-handle></div>
      <div ng-include="widget.body"></div>
      <div class="panel-footer" ng-include="widget.footer"></div>
    </div>
  </div>
</div>

来自数组中的数据:

var widgets = [{
        title: 'Sites',
        header: 'panel-header-sites.html',
        body: 'include-sites.html',
        footer: 'panel-parent-footer.html'
    }, ...]

ng-include(include-sites.html)中的绑定:

<div class="panel-body" ng-controller="SiteCtrl as ctrlsite">
  <table class="table-condensed table-fixed table-hover">
    <thead>
      <tr>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">name</th>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">connection</th>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">location</th>
        <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2 ">contact</th>
        <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-click="ctrlsite.expandAll(allExpanded = !allExpanded)" data-toggle="tooltip" data-placement="top" title="All Details"><i class="zmdi zmdi-more zmdi-hc-2x"></i></a></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="site in ctrlsite.sites">
        <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3 h-dotted-line">{{site.SiteName}}<br/>
          <span class="tr-secondary-row text-capitalize" ng-repeat="connection in site.Connections">{{connection.ExternalIP}}</span></td> ... </div>

控制器:

var app = angular.module('myApp', ['ngMessages', 'ngResource', 'angular.filter', 'dndLists'])

  .factory('Sites', function ($resource) {
    return $resource('data/sites.json');
  });

app.controller('SiteCtrl', function ($scope, Sites) {
    var self = this;

    console.log("SiteCtrl hit");
    console.log($scope.$id);
    self.sites = Sites.query();

    self.expandAll = function (expanded) {
      // $scope is required here, hence the injection above, even though we're using "controller as" syntax
      $scope.$broadcast('onExpandAll', {
        expanded: expanded
      });
    };

  });

失败,因为我收到以下错误:

http://errors.angularjs.org/1.5.9/ng/areq?p0=SiteCtrl&p1=not%20aNaNunction%2C%20got%20undefined

当所有代码都驻留在一个文件(index.html)中时,一切都很有效。我一直在寻找解决这个问题的几个星期,但我对AngularJS很新。

0 个答案:

没有答案