angularjs + 引導程序，模板中的 btn function

Question

我正在學習 angularjs 和引導程序。 這很簡單，但我不知道，我做錯了什么。 重點是用按鈕重新加載頁面，但我無法進入必須重新加載頁面的 function。

這是我的 component.js


        myApp.component('refreshComponent', {
        template:"<button class='btn btn-lg  btn-info' ng-click='refresh()' >Refresh </button>",
        controller: function RefreshController($scope, $element, $attrs) {
          var vm = this;

          vm.refresh = function(){
             console.log("How to get here?")
             location.reload();
          }
        }
      });

這是我的索引。html


    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    </head>

    <body>
      <div ng-app="myApp" class="container bg-primary img-rounded">
        <h1>
          <div class="row">
            <div class="col-xs-6 text-right">
              <date-component></date-component>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 text-right">
              <greetings-component></greetings-component>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6  text-right ">
              <refresh-component></refresh-component>
            </div>
          </div>
        </h1>
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

      <script src="date.component.js"></script>
      <script src="greetings.component.js"></script>
      <script src="refresh.component.js"></script>
    </body>
    </html>

順便說一句，其他組件正在工作var myApp = angular.module('myApp', []); myApp 在 date.component.js 中初始化

Answer 1

確保將controllerAs: 'vm',添加到組件中，並將ng-click='refresh()添加到ng-click='vm.refresh()

所以你的組件應該是這樣的：

 myApp.component('refreshComponent', {
    template:"<button class='btn btn-lg  btn-info' ng-click='vm.refresh()' >Refresh </button>",
    controllerAs: 'vm',
    controller: function RefreshController($scope, $element, $attrs) {
      var vm = this;

      vm.refresh = function(){
         console.log("How to get here?")
         location.reload();
      }
    }
  });

提示1：

如果您使用vm ，則根本不需要$scope 。 埃：

function RefreshController($element, $attrs)

提示2：

如果你 go 混淆你的代碼，值得使用$inject來避免意外行為：

 myApp.component('refreshComponent', {
    template:"<button class='btn btn-lg  btn-info' ng-click='vm.refresh()' >Refresh </button>",
    controllerAs: 'vm',
    controller: RefreshController
  }); 


function RefreshController($element, $attrs) {
      var vm = this;

      vm.refresh = function(){
         console.log("How to get here?")
         location.reload();
      }
 }

RefreshController.$inject = ['$element', '$attrs'];

angularjs + 引導程序，模板中的 btn function

問題描述

這是我的 component.js

這是我的索引。html

1 個解決方案

解決方案1
0 已采納 2020-04-26 12:34:25

angularjs + 引導程序，模板中的 btn function

問題描述

這是我的 component.js

這是我的索引。html

1 個解決方案

解決方案1 0 已采納 2020-04-26 12:34:25

解決方案1
0 已采納 2020-04-26 12:34:25