如何在我的情况下动态更新数据?

时间:2014-03-28 18:02:43

标签: angularjs angularjs-scope

我在我的应用中使用Angular Framework。

我有这样的设置

我的app.js

var app = angular.module('myApp', ['ngRoute','myApp.controller').
    config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/test', {
                templateUrl: 'template/main.html',
                controller: 'mCtrl'
            })
            .otherwise({redirectTo: '/te'});
    }]);

测试controller.js

   var controllers = angular.module('myApp.controller', ['ui.bootstrap']).
    controller('mCtrl', ['$scope', function ($scope) {
       ..other codess....
       //get data after a click....
       $scope.clickme = function(){
           $scope.mainData = data //getting new data after an click event is fired   
           //broadcast broadcastData event
           $scope.$broadcast('broadcastData', $scope);
        }
    }]).
    controller('NCtrl', ['$scope', function ($scope) {
       $scope.test = 'test data here'

       //getting data from broadcastData event 
       $scope.$on('broadcastData', function(event, Data){
           $scope.test = Data.test //Data.test is a string called 'after click'
       })      
}]);

的index.html

    <div ng-controller='mCtrl'> 
      <div ng-click='clickme()'> click me</div>
      <ng-include src="'template/main.html'"></ng-include>
   </div>

main.html中

<div ng-controller='NCtrl'>
    {{mainData}}
/div>

我的问题是mainData显示&#39; test data here&#39;页面首次加载时很好。但是,在我单击div并触发click事件后。 mainData不会更新为&#39; after click&#39;。似乎$scope.$on没有更新html mainData ...我花了很多时间在这个问题上。任何人都可以帮我吗?非常感谢!

1 个答案:

答案 0 :(得分:0)

我认为您必须使用$rootScope代替$scope mCtrl进行广播,因为broadcast会将事件名称向下发送到所有子范围

我并不认为使用ng-include会在控制器范围之外创建一个子范围。它创建了一个新的范围,使其成为mCtrl's范围的兄弟。