AngularJS自定义指令问题

时间:2017-01-30 11:05:28

标签: javascript html angularjs

我对AngularJS相当新,并且在学习一门课程时遇到了一个问题(使用较早版本的Angular)。 刚刚创建了一个自定义指令,它似乎没有在View端调用。 这是我的HTML代码:

<h3>Results Found:</h3>
<div class="list-group">
    <search-result></search-result>
</div>

这里是JS代码:

myApp.directive('searchResult', function() {
    return {
        template: '<a href="#" class="list-group-item active"><h4 class="list-group-item-heading">Doe, John</h4><p class="list-group-item-text">555 Some St, New York, NY 101010</p></a>'
    }
});

注意:我目前正在使用AngularJS的版本1.6.1 。 有人能帮助我吗? (先谢谢大家)

1 个答案:

答案 0 :(得分:0)

<强>样本

var myApp = angular.module('DirectiveApp', []);

myApp.controller("mainController", ["$scope", "$http",
  function($scope, $http) {
     
  }
]);
myApp.directive('searchResult', function() {
    return {
        template: '<a href="#" class="list-group-item active"><h4 class="list-group-item-heading">Doe, John</h4><p class="list-group-item-text">555 Some St, New York, NY 101010</p></a>'
    }
});
<!DOCTYPE html>
<html ng-app="DirectiveApp">
<head>
  <title>List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  </head>
<div ng-controller="mainController">
  <div class="container">
    <search-result></search-result>
  </div>
</div>
</body>

</html>