javascript - angularjs 事件执行顺序与预期不一致

Question

http://jsfiddle.net/w86Lzesh/
业务流程是这样的，点击框内的按钮，子控制器发送时间到父控制器，改变数据，父控制器改变万数据后回传成功事件给子控制器，子控制器收到后提示用户操作完成。

现在遇到问题是点击了按钮后，页面提示用户操作完成，然后才区改变父控制器内的数据，我怎么也没弄明白是为啥

Answer 1

   $scope.skin=msg;
   $scope.$apply();
   //父元素向子元素广播
   $scope.$broadcast("successChange",111);

设置过 skin 后当时 angular 并不知道改变，所以没有重新渲染

Answer 2

例如这种需求， 我非常不建议楼主使用事件广播的方法做。 而且也不建议控制器嵌套。
angular里面有很多种方法， 但由于教程的问题，太多不论不类的教程导致了这种问题。

楼主这类样式css问题的 简单的做法
1 直接把数据放到@rootScope上。 不要事件广播。 直接就可以操作@rootScope的属性既可。
2 为什么要嵌套控制器？ 如果每个子控制器的目的是做成一个组件， 那么应该封装成directive 指令， 通过在hmtl标签属性上传值， 这也是angular 提倡的声明式写法。 就是说控制器里面调用的是指令而不是子控制器。
3 使用ng－class 标签把样式名称写到html标签上，例如ng-class=“{‘cssnamered’:skin=='red'}” 这种而不要拼接样式名称。

如果非要用事件广播，这个问题界面没有刷新是因为广播后先执行变量附值，然后在进行第二次广播 然后才进行angular的$digest进行界面刷新。 $scope.$apply();是强制$digest进行界面刷新