Question

仍在学习角度，我想从列表中点击一个项目并显示提醒，其中包含被点击的项目的名称。
在mainMenu.html中，ng-click已使用列表元素ng-click="mainMenuSelection(item.name)注册，但未在controllers.js中调用alert(name) 我究竟做错了什么？感谢

我还注意到Google Chrome Sources没有按照第二张图片显示包含mainMenu.html的views文件夹。

//---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");
        }
    )
    $scope.mainMenuSelection = function(item) {
        alert(item);
    }
}

//---headerCtrl.js-----------------------------------------------
angular
    .module('angApp')
    .controller('HeaderCtrl', ['$scope', HeaderCtrl]);

function HeaderCtrl() {
    var vm = this;
    vm.title = "Tap left menu \u2630";
    vm.headerTitle = setHeaderTitle;

    function setHeaderTitle(title) {
        vm.title = title;
    }
}

//---index.html-----------------------------------------------
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <base href="http://localhost:63342/an1/">
    <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="mainMenuSelection(item.name)">
            <image src="images/{{item.image}}.png"></image>
            {{item.name}}
        </li>
    </ul>
</section>

Answer 1

我创造了一个与你想要的工作实例接近的小提琴。显然，为了简洁起见，我有一个非常简化的版本。

http://jsfiddle.net/frishi/U3pVM/21624/

(function () {                                          
'use strict';

angular
    .module('angApp', [])                  
    .controller("MainMenuCtrl", MainMenuCtrl)
})();

function MainMenuCtrl ($scope, $http) {
    $scope.menuItems = [{
    name:"Tom"},
    {name: "Harry"},
    {name: "Wiley"}
    ]

    $scope.mainMenuSelection = function(item) {
        alert(item);
    }
}

标记：

<div ng-app="angApp">
<section class="mainMenu" ng-controller="MainMenuCtrl">
    <ul>
        <li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
            <image src="images/{{item.image}}.png" />
            {{item.name}}
        </li>
    </ul>
</section>

</div>

我使用了硬编码的JSON对象数组。我也不像你那样引导应用程序。

您的问题提供的信息太少，可能是什么错误。按照小提琴中指定的示例进行操作，如果不起作用，请回复更多详细信息。

Answer 2

这是我的version in Plunker。我试图遵循你的文件结构。

确保<body ng-app="angApp">在那里，那只是我添加的一件事（我现在看起来太微不足道了......）

编辑：添加Git repo

Git repo with working code =＆gt; clone =＆gt; cd到目录=＆gt; npm instal = npm start =＆gt;文件将在port:63342上提供（使用节点服务器提供服务文件，以便复制发生问题的环境）

角度ng-单击未激活的列表项

2 个答案: