Question

我正在学习角度，并想了解为什么mainMenu.html中的列表li显示json文件中的数据，即使你在mainMenu.html 没有控制器

如果MainMenuCtrl是app.js中指示的控制器，我如何在li标签内实现ng-click="tappedMenu(item)？感谢

//---app.js-----------------------------------------

(function () {                                          
    'use strict';

    angular
        .module('angApp', ['ngRoute'])                  
        .config(['$routeProvider', routeProvider]);    
})();

function routeProvider ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/mainMenu.html',
        controller: 'MainMenuCtrl'
    }).otherwise({      //home page
        redirectTo: '/list'
    });
}


angular.element(document).ready(function () {
    angular.bootstrap(document, ['angApp']);
});


//---controllers.js-----------------------------------------

angular
    .module('angApp')                                                   
    .controller('MainMenuCtrl', ['$scope', '$http', MainMenuCtrl]);    

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )
}

//---index.html-----------------------------------------

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <script src="js/controllers/headerCtrl.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>

<main ng-view></main>


</body>
</html>


//---mainMenu.html-----------------------------------------

<section class="mainMenu">
    <ul>
        <li ng-repeat="item in menuItems" ng-click="tappedMenu(item)">
            <image src="images/{{item.image}}_.png"></image>
            {{item.name}}
        </li>
    </ul>
</section>

Answer 1

控制器在app.js中定义，为MainMenuCtrl。对于第二个问题，您需要在名为tappedMenu的同一控制器中实现一个函数，该函数将参数作为项。你必须写下这样的东西：

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )

    $scope.tappedMenu = function(item) {
        /*do whatever you want with the clicked item*/
    }
}

因此，如果使用$ routeProvider定义控制器，则不必在视图（html文件）中明确定义它。

Answer 2

在这种情况下，路由器负责将控制器连接到您的模板：

function routeProvider ($routeProvider) {
  $routeProvider.when('/list', {
    templateUrl: 'views/mainMenu.html',
    controller: 'MainMenuCtrl'
  }).otherwise({      //home page
    redirectTo: '/list'
  });
}

/list路由与控制器mainMenu.html绑定到MainMenuCtrl。（See official documentation）

至于你的第二个问题，只需在控制器中添加你需要的任何方法，就像Popescu已经显示的那样：

$scope.whatever = function(){...}

在模板中：

<li ng-click="whatever()">

Answer 3

您需要在'MainMenuCtrl'中编写'tappedMenu'功能。否则一切都好。如果你遇到任何问题，请敲我。

没有控制器的角度ng重复

3 个答案: