Блог

Главная - Вопросы по программированию - Как изменить представление из одного компонента, нажав кнопку из другого компонента с помощью AngularJS?

Как изменить представление из одного компонента, нажав кнопку из другого компонента с помощью AngularJS?

#javascript #angularjs #binding

Вопрос:

Я новичок в AngularJS и нуждаюсь в помощи. У меня есть два компонента (приветствие и чат) в index.html и две тестовые кнопки, которые переключают их между собой.

  <div ng-switch on ='view'>
    <button ng-click='view="welcome"'>Welcome</button>
    <button ng-click='view="chat"'>Chat</button>
    <welcome ng-switch-when='welcome' ></welcome>
    <chat ng-switch-when='chat'></chat>
    
  </div>

В «Welcome.html» имеет <button>Start chat</button> .
Как перенести поведение теста <button ng-click='view="chat"'>Chat</button> в index.html
к <button class="start-chat-button" ng-click="view='chat'">Start chat</button> в welcome.html? Теперь эта кнопка не переключает представления.

Код для ng-переключателя:

     angular.module('myApp', [
      'ngRoute',
      'myApp.welcome',
      'myApp.chat',
      'myApp.version'
    ])
    .controller('View', ['$scope', function($scope) {
      $scope.view = 'welcome';
    }]);

Заранее спасибо!

Комментарии:

1. Побочный вопрос: вы изучаете AngularJS, потому что вам нужно поддерживать старый проект, и у вас нет выбора? Или вы просто изучаете это «для удовольствия», чтобы овладеть этим искусством? Потому что, если это последнее, вы должны знать, что AngularJS начал умирать, когда был выпущен Angular 2, около 5 лет назад

2. @JeremyThille, я изучаю AngularJS, потому что такова воля моего работодателя. Сейчас я стажер в крупной компании в своем городе, и результатом моей стажировки должно стать приложение в Angularjs.

3. Так что это будет сделано для того, чтобы поддерживать существующие приложения. Я сомневаюсь, что вы разработаете какое-либо новое приложение с использованием технологии, которая устарела в 2016 году. С тех пор я к нему не прикасался, так что не знаю, как ответить на ваш вопрос. Раньше я знал…

4. @JeremyThille может быть… думаю, ты прав, и я сохраню существующий проект.

Ответ №1:

Так что ответ оказался не таким сложным, как я ждал)

Привязки решили проблему! Спасибо за статью https://blog.krawaller.se/posts/dissecting-bindings-in-angularjs/

welcome.html:

 <welcome>
  <button ng-click="changeToChat()">Start chat</button>
</welcome>

welcome.js:

 .directive('welcome', function() {
    return {
      scope: {
        changeToChat: '<' //the most important thing!
}

index.html:

 <welcome change-to-chat="showChat"></welcome> //look to this attribute

app.js:

 $scope.showChat = function() {
      $scope.isWelcome = !$scope.isWelcome;
  };

Я написал функцию showChat в app.js. Затем передал его в качестве обратного вызова в область действия директивы welcome. Вот и все! И кнопка меняет вид с приветствия на чат.

Метки: ,