如何通过使用angularJS单击另一个组件的按钮来更改一个组件的视图？

Posted 2023-02-23

【中文标题】如何通过使用angularJS单击另一个组件的按钮来更改一个组件的视图？

【英文标题】：How to change view from one component by clicking a button from another component using angularJS?

【发布时间】：2021-09-19 17:29:10

【问题描述】：

我是 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>in index.html 到<button class="start-chat-button" ng-click="view='chat'">Start chat</button>inwelcome.html？现在这个按钮不会切换视图。

ng-switch 代码：

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

提前致谢！

【问题讨论】：

附带问题，你学习AngularJS是因为你必须维护一个旧项目而你别无选择吗？还是您只是“为了好玩”而学习它，以便熟练掌握它？因为如果是后者，你必须知道 AngularJS 在大约 5 年前发布 Angular 2 时就开始消亡了

@JeremyThille，我正在学习 AngularJs，因为这是我雇主的意愿。现在我在我所在城市的一家大公司实习，我的实习结果应该是Angularjs的一个应用。

所以它将是为了维护现有的应用程序。我怀疑您是否会使用 2016 年弃用的技术开发任何新应用程序。从那时起我就没有接触过它，所以我不知道如何回答您的问题。我曾经知道...

@JeremyThille 也许......认为你是对的，我会维护现有项目。

【参考方案1】：

所以答案并不像我等待的那么难）

绑定解决了问题！感谢文章https://blog.krawaller.se/posts/dissecting-bindings-in-angularjs/

欢迎.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;
  ;

我在 app.js 中写了一个函数 showChat。然后将它作为回调传递给欢迎的指令范围。就这样！按钮将视图从欢迎更改为聊天。