Angular Directives錯誤

試圖在Angular中做出一個簡單的指示。做錯事:)Angular Directives錯誤

我想輸入'directive.html'中的內容到'app-info'指令中。代碼工作沒有指令，所以我寫錯誤的指令。

乾杯！

HTML文件

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>angular</title> 
</head> 
<body ng-app="angularApp"> 
    <div ng-controller="mainController"> 
     <ul ng-repeat="item in list"> 
      <app-Info info="item"></app-Info> 
     </ul> 
    </div> 
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script type="text/javascript" src="angular.js"></script> 
</body> 
</html>

Angular.js文件

var app = angular.module("angularApp", []); 

app.controller("mainController", ["$scope", function($scope){ 
    $scope.list = [ 
     { 
      name: "Joe", 
      age: 26, 
      job: "Front-End Developer", 
      skill: 0 
     }, 
     { 
      name: "Rob", 
      age: 23, 
      job: "Ruby Developer", 
      skill: 0 
     }, 
     { 
      name: "Mark", 
      age: 25, 
      job: "Back-End Developer", 
      skill: 0 
     } 
    ]; 

    $scope.skill = function(index) { 
     $scope.list[index].skill += 1; 
    }; 
}]); 

app.directive("appInfo", function(){ 
    return { 
     restrict: "E", 
     scope: { 
      info: "=" 
     }, 
     templateUrl: "directive.html" 
    }; 
});

指令HTML文件

<li>{{ item.name }}</li> 
<li>{{ item.age | currency }}</li> 
<li ng-click="skill($index)">{{ item.skill }}</li>

來源

2016-09-17 Joe Consterdine

有幾個問題我在粘貼代碼注意到：

首先，你需要修改directive.html使用{{info.name}}而不是{{item.name}}因爲你的指令範圍變量的信息，而不是項目。

其次，修改你的html文件。指令名稱應該是「app-info」而不是「app-Info」。

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>angular</title> 
</head> 
<body ng-app="angularApp"> 
    <div ng-controller="mainController"> 
    <ul ng-repeat="item in list"> 
     <app-info info="item"></app-info> 
    </ul> 
    </div> 
    <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script type="text/javascript" src="angular.js"></script> 
</body> 
</html>

Directive.html

<li>{{ info.name }}</li> 
<li>{{ info.age }}</li> 
<li ng-click="skill($index)">{{ info.skill }}</li>

[WorkingDemo]

來源

2016-09-17 10:13:35

完美！謝謝:) –

@JoeConsterdine：不客氣:) –

-1

我相信你的指令需要被包裹在一個div標籤或其他標籤。它必須有一個根元素。

來源

2016-09-17 08:36:43 sean

Angular Directives錯誤

回答

相關問題