0

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

控制器的视图有一个自定义组件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>

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

4

1 回答 1

0

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

请参阅在单击按钮时将数据填充到父控制器中时填充下拉组件的示例。希望这会有所帮助！

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;
}]);;
}]);

下拉组件.html

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

索引.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>
于 2016-11-18T18:50:30.903 回答