Question

这是我的设置 - 我有一个控制器正在使用一些工作，然后异步返回数据。在这种情况下，数据会在超时时返回，但在现实生活中，这会更有趣：

查看：

<div ng-controller="RootController as root">

  <h1>Angular Project</h1>
  <div ng-show="{{root.greeting}}">
    <p>{{root.greeting}}</p>
  </div>

</div>

控制器：

(function(){

  'use strict';

  function RootController(greetingService) {

    var vm = this;
    vm.greeting = '';

    // startup logic
    activate();

    function activate() {
        greetingService.greeting().then(
          function( response ) {
              vm.greeting = response;
          },
          function( error ) {
              vm.greeting = error;
          }
        );
    }
  }
  RootController.$inject = ['greeting'];
  angular.module('app.core').controller('RootController', RootController);

})();

服务：

(function() {
  'use strict';

  // Greeting Service
  function greeting( $timeout ) {

    // public API
    var service = {
        greeting:   greeting
    };
    return service;

    // internal functions
    function greeting() {
        return $timeout( function() {
            return 'Hello world!'; 
        }, 1000 );
    }

  }

  temp.$inject = ['$timeout'];
  angular.module('app.core').factory( 'greeting', greeting );

})();

问题：

为什么我的视图在超时结算并且我的控制器中发生vm.greeting分配时没有更新？我已经看到人们在Angular内部和Angular＆＃34;之间形容，但在我看来，我还没有去过Angular＆＃34;这里。
我知道我可以调用$ scope。$ apply（），但我遇到了＆＃34; digest is already in progress＆＃34;错误，而且似乎我不应该这样做。
我应该更好地组织我的组件吗？我还尝试通过$ rootScope广播事件并在Controller中编写事件处理程序，但这种安排表现出相同的结果（即当异步模型发生更改时视图不会更新）。

Answer 1

你不需要ng-show

的大括号

https://docs.angularjs.org/api/ng/directive/ngShow

变化

<div ng-show="{{root.greeting}}">

到

<div ng-show="root.greeting">

Answer 2

您构建代码的方式与我通常所做的完全不同。请查看此链接以获取精彩的时尚指南。http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

至于您的问题，Angular使用$ scope将控制器中的值绑定到视图。因此，您的控制器应该注入$ scope，然后您可以使用$ scope.greeting代替vm.greeting。

在角度控制器中处理异步更新的正确方法

2 个答案: