Question

这里是angularJS代码：

angular.module("app")
.controller("myController", function ($scope) {

    $scope.addDashboard = function() {
        alert('done');
    }
});

这里是html代码：

<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

    <li class="dashboard" ng-controller="myController">
        <a id="dashboard_link">
            <span class="fa-stack fa-lg pull-left">
               <i class="fa fa-dashboard fa-stack-1x text-success"></i>
            </span>DASHBOARDS   
            <i class="fa fa-plus fa-stack-18" id="test" 
               ng-click="addDashboard()">
            </i>
         </a>
    </li>
 </ul>

单击图标时没有触发！知道为什么这不起作用吗？

Answer 1

您的模块应该注入空依赖项

angular.module("app",[])
.controller("myController", function ($scope) {

}

<强>样本

＆＃13;

angular.module("app",[]).controller("myController", function ($scope) {

$scope.addDashboard = function() {
    alert('done');
}
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="//code.angularjs.org/1.4.7/angular.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

    <li class="dashboard" ng-controller="myController">
        <a  id="dashboard_link"><span class="fa-stack fa-lg pull-left"   ><i class=" fa-plus fa-stack-18"  ng-click="addDashboard()"></i></span>DASHBOARDS   <i class="fa fa-plus fa-stack-18" id="test" ng-click="addDashboard()"></i></a>
    </li>
 </ul>
</body>

</html>

＆＃13;

Answer 2

您应该将addDashboard mathod放入标记内容like:- This fiddle

<a id="dashboard_link" ng-click="addDashboard()">

你的代码也在工作中找到尝试在你放置addDashboard方法的i元素中放入一些示例文本

Answer 3

＆＃13;

var app = angular.module('app', []);
app.controller("myController", function($scope) {
  $scope.addDashboard = function() {
    alert('done');
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

  <li class="dashboard" ng-controller="myController">
    <a id="dashboard_link">
      <span class="fa-stack fa-lg pull-left">
    <i class="fa fa-dashboard fa-stack-1x text-success"></i>
    </span> DASHBOARDS
      <i class="fa fa-plus fa-stack-18" id="test" ng-click="addDashboard()"></i>
    </a>
  </li>
</ul>

＆＃13;

Answer 4

无论是否使用依赖注入，都应该实现至少空注入 angular.module("app",[]) .controller("myController", function ($scope) {

它只是创建全局命名空间和模块

的标准语法

Answer 5

首先需要了解 angular.module('app', []) 与 angular.module('app')

之间的区别

angular.module（'app'，[]）

它将创建一个名为 app 的新模块，其中数组（ [] ）是依赖模块的集合。< / p>

<强> angular.module（ '应用'）

用于检索名称 app 的现有模块。

因此，在您的情况下，您必须在创建新模块时使用angular.module('app', [])。

<强>样本

angular.module("app",[])
.controller("myController", function ($scope) {
$scope.addDashboard = function() {
    alert('done');
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">
    <li class="dashboard" ng-controller="myController">
        <a id="dashboard_link" ng-click="addDashboard()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x text-success"></i></span>DASHBOARDS<i class="fa fa-plus fa-stack-18" id="test" ></i></a>
    </li>
 </ul>

在AngularJS中没有触发ng-click

5 个答案: