AngularJS:在html模板中访问全局变量

错过了

我正在编写一个angularJs应用程序:

html:

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

</div>

我正在寻找一种方法来更新全局范围内的html中的currentTitle变量。

.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变量不会在模板中更新。我究竟做错了什么?

马修斯

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

这不是理想的方法,但是对于此要求,您可以将currentTitle保留在$ rootScope中,并在每个控制器中保持更新$ 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS:在html模板中访问全局变量

来自分类Dev

如何访问模板中的全局变量?

来自分类Dev

在模板中访问jinja2全局变量

来自分类Dev

Laravel Blade模板中的全局变量

来自分类Dev

在Swift中访问全局变量

来自分类Dev

汇编:访问{{parseJSON}}中的全局变量

来自分类Dev

在本地环境中访问全局变量

来自分类Dev

访问lua中的全局变量

来自分类Dev

汇编:访问{{parseJSON}}中的全局变量

来自分类Dev

如何在不使用帮助器的情况下访问Meteor模板中的全局变量?

来自分类Dev

函数访问全局变量

来自分类Dev

如何访问全局变量

来自分类Dev

从模块访问全局变量?

来自分类Dev

如何确定Blade模板中的全局变量?

来自分类Dev

如何从模板覆盖XSLT中的全局变量?

来自分类Dev

如何在树枝模板文件中定义全局变量?

来自分类Dev

如何从模板覆盖XSLT中的全局变量?

来自分类Dev

在Django中为模板提供全局变量

来自分类Dev

在marko模板中全局访问变量

来自分类Dev

在Android中访问菜单XML文件中的全局变量

来自分类Dev

在CSharpScript中的脚本化类中访问全局变量

来自分类Dev

在Android中访问菜单XML文件中的全局变量

来自分类Dev

AngularJs清除全局变量

来自分类Dev

如何在Python中访问全局变量?

来自分类Dev

Tcl线程:如何访问线程中的全局变量

来自分类Dev

如何从Node中的required()文件访问全局变量?

来自分类Dev

如何动态访问Node中的全局变量?

来自分类Dev

如何在r函数中访问全局变量

来自分类Dev

如何在子程序中访问全局变量