angularjs 组件如何检测到父控制器中加载了数据？答案

【问题标题】：How can angularjs component detect that data is loaded in parent controller?angularjs 组件如何检测到父控制器中加载了数据？
【发布时间】：2016-11-18 16:43:56
【问题描述】：

我有一个 MainController 别名 vm，它有一个属性 vm.data 是从一些 DataService 加载的>.

Controller 的视图有一个自定义组件 rs-dropdown，它应该在加载 vm.data 后加载下拉值。 vm.data 是主控制器的一个属性。

组件本身有什么方法可以监视父 MainController 中的变化，并在加载数据后执行其加载操作？

谢谢

更新：感谢 Clavies，将 ng-if="condition" 添加到组件实际上使该组件在条件为真时被创建和初始化。看起来 Angular 会不断监控 ng-if 并在满足条件时打开组件。

这里我为我的组件添加了ng-if="vm.woReAssign" 属性，现在组件只有在这个条件为真时才会被初始化和创建。

<rs-dropdown ng-if="vm.woReAssign"
                rs-server-controller="WorkOrder"
                rs-server-action="GetServiceProviderDropDownList"
                rs-filter="{woNum:'{{vm.woReAssign.WorkOrderNumber}}'}"
                rs-class="form-control">
</rs-dropdown>

附：即使条件通过可能延迟的异步调用变为真，Angular 似乎一直在检查这个条件，然后恢复组件。

【问题讨论】：

这与您提出的问题yesterday 有何不同？除了您在此处提供的信息少于上一个问题的事实之外，当多个 cmets 建议我们希望查看更多信息（和代码）以了解您真正想要的是什么时在这里完成？
正如我昨天试图解释的问题，如果元素的行为与父元素的行为相关，那么它不是一个好的候选组件，可能应该是一个指令而是。
还有什么比这更简单的呢？如果某个控制器的属性发生了变化，组件可以监控，为什么要查看代码？
我不确定如何以其他方式解释它。组件是独立的。他们是孤立的。它们并非旨在与页面上的其他元素交互，除非数据被显式传递给它们。至于看代码，这里是提问的标准；看到您编写的代码既可以让我们看到您解决问题的方法，而不是进行猜测，也可以为测试和故障排除提供一些参考。
例如，如果您的组件接受控制器正在获取的数据作为参数，那么您可以使用ng-if 在数据准备好传递给它之前不渲染组件。也可以使用其他技术，但责任可能在于父元素，而不是子组件。

标签： angularjs angular-components

【解决方案1】：

我试图创建你提到的场景。您可以在组件设计中通过生命周期lifecycle hook$onchange 监听控制器更新。

查看example，当单击按钮时将数据填充到父控制器中时，下拉组件会被填充。希望这会有所帮助！

var app = angular.module("myApp", []);

app.controller("mainController", function(bookService, $scope) {
  var vm = this;
  vm.showDropdown = false;
  vm.loadBooks = function() {
    bookService.getAllBooks().then(function(books) {
      vm.books = books;
      vm.showDropdown = true;
    }, function(err) {
      vm.showDropdown = false;
      //error
    });
  }
});

function dropdownControllerFn(bookService) {
  var model = this;
  model.$onInit = function() {
    //do intialization
  }

  model.$onChanges = function(changes) {
    model.books = changes;
  };
}

app.component("rsDropdown", {
  templateUrl: 'dropdownComponent.html',
  bindings: {
    books: '<'
  },
  controllerAs: 'model',
  controller: dropdownControllerFn
});

app.factory('bookService', ['$http', '$timeout', '$q', function($http, $timeout, $q) {
  var urlBase = 'favouriteBooks.json';
  var service = {};
  service.getAllBooks = function() {
    return $http.get(urlBase).then(function(response) {
      return response.data;
    });
  };
  return service;
}]);;
}]);

dropdownComponent.html

<div>
   <select ng-options="s.bookName for s in model.books" ng-model="selitem">
      <option value="">--Select--</option>
    </select>
</div>

index.html

<body data-ng-app="myApp" data-ng-controller="mainController as vm">
  <rs-dropdown books=vm.books ng-if="vm.showDropdown"></rs-dropdown>
  <button ng-click="vm.loadBooks()">Get Books</button>
</body>

【讨论】：