2015-09-20 3 views
1

Я новичок в angular.js. Я просто хочу отобразить сообщение «Добро пожаловать», которое является «ControllerB» при нажатии кнопки, которая находится в «ControllerA». Я попробовал это, используя «сервис», но я не понял, как это сделать. Вот мой HTML код:Как отображать данные в одном контроллере, когда событие click произошло в другом контроллере?

<body ng-app='myApp'> 
    <script src="js/angular.js"></script> 
    <script src="script/service.js"></script> 
    <div ng-controller='contA'> 

     <input type="button" ng-click="clicked()" value="Click"> 

    </div> 
    <div ng-controller='contB'> 
     <div ng-show="clickShow"> 
      <h1>Welcome</h1> 
     </div> 
    </div> 
</body> 

И мой JS код:

var app = angular.module('myApp',[]); 

app.controller('contA', ['$scope', 'displayServ', function(scope,displayServ){   
    scope.clicked = function(){ 
     displayServ.disp = true;    
    }  
}]); 

app.controller('contB',['$scope', 'displayServ', function(scope,displayServ){   
    scope.clickShow = displayServ.disp;  
}]); 

app.service('displayServ', function(){ 
    this.disp = false; 
}); 
+0

Возможный дубликат: http://stackoverflow.com/questions/14502006/working-with-scope-emit-and-on. –

ответ

1

Вы должны связываться с disp свойства объекта сервиса напрямую, потому что scope.clickShow не собирается менять сам по себе - есть нет связи между сервисом disp и областью действия clickShow.

Таким образом, вы можете выставить объект службы непосредственно в шаблоне:

var app = angular.module('myApp',[]); 

app.controller('contA', ['$scope', 'displayServ', function(scope,displayServ){   
    scope.clicked = function(){ 
     displayServ.disp = true;    
    } 
}]); 

app.controller('contB',['$scope', 'displayServ', function(scope,displayServ){   
    scope.displayServ = displayServ;  
}]); 

app.service('displayServ', function(){ 
    this.disp = false; 
}); 

и в шаблоне, то:

<body ng-app='myApp'> 
    <script src="js/angular.js"></script> 
    <script src="script/service.js"></script> 
    <div ng-controller='contA'> 
     <input type="button" ng-click="clicked()" value="Click">  
    </div> 
    <div ng-controller='contB'> 
     <div ng-show="displayServ.disp"> 
      <h1>Welcome</h1> 
     </div> 
    </div> 
</body> 

В противном случае вам придется использовать scope.$watch, но это не рекомендуется в этом случае.

0

Вы можете использовать $ Broadcast, чтобы показать эффект в другом контроллере

Смежные вопросы