Угловые директивы Неверный

пытается сделать простую директиву в угловом. Что-то не так :)Угловые директивы Неверный

Я хочу вывести содержимое в директиве 'directive.html' в директиву 'app-info'. Код работает без директивы, поэтому я неправильно пишу директиву.

Cheers!

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

Я считаю, ваша директива должна быть завернуты в сНу тег или другой тег , Он должен иметь один корневой элемент.

источник

2016-09-17 08:36:43 sean

Угловые директивы Неверный

ответ

Смежные вопросы