嵌套模板不是绑定到控制器变量的两种方式

Question

以下设置有很多麻烦（如果不进行重大重写，我无法更改）。 问题的概述是，当我通过 ng-include 从另一个通过 ui-view（来自 ui-router）加载的部分嵌入部分时，ng-bind 没有绑定回控制器范围。

这是一个简化的示例... 这是ui路由器

.state('investments', {
        url: '/investments/:Uid',
        abstract: true,
        templateUrl: 'views/investments.html',
        controller: 'InvestmentsCtrl',
        parent: 'root'
      })
        .state('investments.funds', {
          url: '',
          templateUrl: 'views/investments/funds.html',
        })

第一部分 - views/investments.html 包含一个 ui-view

<div>
  <section class="entity-details clearfix" ui-view></section>
</div>

加载funds.html，其中包含以下内容

<tabset class="tabbable">
<tab>
    <ng-include src="'/views/investments/_investment.html'"></ng-include>
</tab>

最后 _investment.html 有一个输入框，它绑定到控制器 (InvestController) 上的一个变量

<input type="text" placeholder="Search" class="search-query" ng-model="invsearch.query"/>
<button ng-click="update();">Update</button>

现在在 controller 我有以下内容：

angular.module('cougarApp')
  .controller('InvestController', function ($scope, $sce, $state, $debounce) {

     $scope.invsearch = {};

     $scope.update= function () {
         console.log($scope.invsearch);
    };

所以它非常简单（尽管所有嵌套包含）。 当我单击调用 $scope.update() 的按钮时，底线 - 该函数在控制器中被调用，但是 $scope.invsearch 的值是一个空对象。即使我在文本框中输入了一个值？？

现在，当我不使用初始 ui 视图时，完全相同的代码可以工作。 即，如果我的第一个模板直接调用 ng-include，那么一切正常。 我对 Angular 还是有点陌生​​，显然我在这里缺少一些关于嵌套范围的内容。

请有人在这里帮助我。 谢谢

Answer 1

尝试像这样在您的investments.html 文件中声明控制器。

<div ng-controller="InvestmentsCtrl">
  <section class="entity-details clearfix" ui-view></section>
</div>