AngularJS：如何在HTML模板中访问全局变量

Question

I am writing an angularJs app:

html :

<div ng-controller=NavCtrl>
        <h1 ng-bind-html="currentTitle"></h1>

</div>

我正在寻找一种更新全局作用域中的currentTitle变量的方法，该变量在我的html中。

.service('WorkService', [function(){
    return {
          currentTitle : 'dada'
      };

}])

.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.currentTitle = WorkService.currentTitle;
  })
})

.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {

        $http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
          success(function(data, status, headers, config) {
              $scope.activateButton($routeParams.workId);
              WorkService.currentTitle = data.title;

          })

})

但是，currentTitle变量在模板中没有更新。我做错了什么吗？

- ratata

---

请查看此问题和答案：https://dev59.com/QGUo5IYBdhLWcg3wvBmX#15800528 - JoseM

Answer 1

当你执行WorkService.currentTitle = data.title时，当前作用域不知道此更改。这就是为什么你在模板中看不到更改的原因。

虽然并不理想，但对于这个需求，你可以在$rootScope中保持currentTitle，并在每个控制器中更新$scope.currentTitle以实现这一目的。

.run(function($rootScope){
$rootScope.globalData = {currentTitle : 'dada'}
})
.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.globalData.currentTitle = 'New title';
  })
})
.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {

        $http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
          success(function(data, status, headers, config) {
              $scope.activateButton($routeParams.workId);
              $scope.globalData.currentTitle  = data.title;

          })

})

同时在HTML中

<h1 ng-bind-html="globalData.currentTitle"></h1>

- Mathews

---

@ratata 理想主义是相对的 :-). 我在我的应用程序中使用这种机制，它对我来说完美地运作。 - Mathews

如果不需要，通常认为在根或全局范围内存储数据是不好的实践。 - Jerrad

Answer 2

你不能在服务中进行双向绑定变量，但是可以绑定到访问器函数。将你的服务更改为返回getter和setter函数：

.service('WorkService', ['$sce', function($sce){
    var currentTitle= $sce.trustAsHtml('dada');
    return {
      getCurrentTitle: function(){ return currentTitle; },
      setCurrentTitle: function(value){ currentTitle = $sce.trustAsHtml(value);}
    };

然后在您的控制器中，您可以这样获取当前标题：

$scope.currentTitle = WorkService.getCurrentTitle;

请注意，您将其设置为getCurrentTitle函数本身（而不是函数的结果）。

现在您的html看起来像这样：

<h1 ng-bind-html="currentTitle()"></h1>

无需设置$watches或将东西挂在$rootScope上。请参见此处的演示。

- Jerrad