2017-03-24 9 views
0

で焼成されていないangularJSコードです:NG-クリックすると、ここに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> 

アイコンをクリックしたときに、それは発生しませんでした!どうしてこれがうまくいかないのでしょうか?

+0

エラーのためにあなたのコンソールをチェックしてください。空の依存関係を持つ角モジュールを初期化しなかったため、初期化に失敗しました。 – Vamsi

+1

モジュールをこの 'angular.module(" app "、[])に変更してくださいhttps://plnkr.co/edit/R4y1KBZ7eQCzV3hdlbED?p=preview –

答えて

0
あなたのモジュールは、空の依存性が注入されている必要があります

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

}

DEMO

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

 
$scope.addDashboard = function() { 
 
    alert('done'); 
 
} 
 
});
<!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>

+0

ng-clickを動かすことは賢明ではありません。 – Ved

+0

'app'は既にプロジェクトに登録されていますか?それをもう一度登録しますか? – Saif

+0

@Vedはいいいえ、 – Sajeetharan

0

あなたはaddDashboardがでmathod置く必要がありますまた、あなたは依存性の注入を使用しているかどうかaddDashboard方法

0

var app = angular.module('app', []); 
 
app.controller("myController", function($scope) { 
 
    $scope.addDashboard = function() { 
 
    alert('done'); 
 
    } 
 
});
<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>

0

を置いた上で、私の要素にいくつかのサンプルテキストを配置しよう見つける作業like:- This fiddle

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

あなたのコードタグ何かあなたは少なくとも空の注入を実装するべきです angular.module("app",[]) .controller("myController", function ($scope) {

そのグローバル名前空間と同様に、モジュールを作成するための唯一の標準的な構文

0

angular.module('app', [])angular.module('app')

angular.module( 'アプリを'、[])の違いを理解するためにまず必要

それは、(名前app、配列の新しいモジュールを作成します。)は、依存モジュールのセットです。名前appの既存のモジュールを取得するために使用

angular.module( 'アプリ')

したがって、新しいモジュールを作成する際にangular.module('app', [])を使用する必要があります。

DEMO

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>

関連する問題