Angular路由器中的Javascript

Javascript inside a Angular router

本文关键字：Javascript 路由器 Angular      更新时间：2023-09-26

我已经构建了一个非常基本的Angular路由器。但现在我想与templateUrl中的元素交互，没有javascript被执行，或者templateUrl中的元素不能被访问。我已经复制了这条指令的大部分代码，在这里。

My index file:

<html ng-app="myApp">
    <head></head>
    <body ng-controller="mainController">
         <a id="btnHome" href="#/">Startseite</a>
         <a id="btnPlanner" href="#/planner">LTC-Planner</a>
         <a id="btnSocial" href="#/social">LTC-Social</a>
         <div id="main">
              <!-- angular content -->
              <div ng-view></div>
         </div>
         <script src="js/routing.js"></script>
    </body>
</html>

这是我的routing.js文件:

// Create the angular module
var myApp = angular.module('myApp', ['ngRoute']);
// Configure our routes
myApp.config(function($routeProvider) {
   $routeProvider
   // Route for the home page
   .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'mainController'
   });
});
// Create the controller and inject angular's $scope
myApp.controller('mainController', function($scope) {
    $scope.message = 'This is the HOME page';
});

，这是模板文件位于pages/home.html:

<button id="btnTest">Say Hello</button>
<script>
    var btnTest = document.getElementById('btnTest');
    btnTest.addEventListener('click', function(){
        console.log('Hello'); 
    });
</script>

也许你们中有人想到了一个主意，或者看到了一个替代方案。

谢谢,安德烈

你应该尝试用一个标签来包装你的HTML模板

<div>
  <button ng-click="test()">Say Hello</button>
</div>

并删除脚本以将逻辑放入控制器中。因为你使用的是angular，所以只需要使用ng-click来绑定点击监听器。

myApp.controller('mainController', function($scope) {
    $scope.message = 'This is the HOME page';
    $scope.test = function() {
      console.log('Hello');
    }
});
相关文章：