AngularJS: 从布局更新视图内容

Question

你可以在下图中看到我正在尝试做什么。

页面上主要有两个部分。页眉部分包含一个公共菜单和一个搜索文本框。

当用户单击菜单（例如电影）时，Movies.html 视图将加载到标有 ng-view 的部分。

每个视图都有自己的控制器，定义如下：

$routeProvider
    .when("/", { templateUrl: "app/albums.html", controller: "albumController" })
    .when("/games", { templateUrl: "app/games.html", controller: "gamesController" })...etc

到目前为止一切顺利。这个想法是，当用户在文本框中搜索内容时，当前视图将被更新。

我可以用一个 commonController 包装 searchTextbox HTML 但是...我如何从这个控制器更新当前加载视图的 $scope？

实现该目标的最佳方法是什么？

谢谢大家

Answer 1

我认为你应该使用 service。

您的 commonController 将通知此服务：

commonController.$inject = ['NotifyViewFactory'];
function commonController(NotifyViewFactory){
  var vm = this;
  vm.inputModel = '';

  this.notifyService = function(){
    NotifyViewFactory.setValue(vm.inputModel); 
  };

  //may be in your example better to listen when route changed:
  //and then use service
  $scope.$on('$routeChangeSuccess', function(scope, next, current){
    NotifyViewFactory.setValue(vm.inputModel);
  });
}

工厂看起来像这样：

NotifyViewFactory.$inject = ['$rootScope'];
function NotifyViewFactory($rootScope){
  return {
    setValue: setValue
  };

  function setValue(data){
    //do something with data if necessary
    $rootScope.$emit('inputUpdated', data);
  }
}

和视图控制器：

viewController.$inject = ['$rootScope', '$scope'];
function viewController($rootScope, $scope){
  $rootScope.$on('inputUpdated',function(event, data){
    $scope.someValue = data.someValue;
  });
}

因此，来自 commonController 的数据可以传递给 viewController 而无需任何更改，或者如果您需要一些更改- 您可以在 NotifyViewFactory 的 setValue 方法中执行此操作（在 $rootScope.$emit 调用之前）。

Answer 2

最简单的解决方案是使用可跨控制器访问的 $scope 变量。

在您的 header 控制器中定义：

'$scope.global = {};'

然后将搜索值赋给那个object，如：

'$scope.global.searchValue = "Ready Player One"'

然后您就可以在其他控制器中访问该变量，而无需经历使用服务的所有复杂过程。

AngularJS: 从布局更新视图内容

AngularJS: Update view content from layout

javascript

views

angularjs

angularjs-scope