在 Angular 中编写指令的正确方法

Question

我这里有一些代码

<div ng-repeat="student in students" class="student">
        <div class="col-md-2">
            <div class="row placeholder">
                <img data-src="holder.js/200x200/auto/sky" class="img-responsive profile" alt="200x200" src="#" data-holder-rendered="true">
            </div>
        </div>
        <div class="col-md-10" style="padding: 17px 40px;">
            <div class="row"><h1 class="name"><a href="/database/profile.php?id=2015552117"><span>{{ student.FirstName }}</span> {{ student.LastName }} , {{ student.MiddleName }}</a></h1></div>
            <div class="row">
                <h3 class="meta col-md-4 col-xs-6">Date of Birth <span class="label label-default">{{ student.DateofBirth | date }}</span></h3>
                <h3 class="meta col-md-4 col-xs-6">State <span class="label label-default">{{ student.State }}</span></h3>
                <h3 class="meta col-md-4 col-xs-6">L.Govt <span class="label label-default">{{ student.lga }}</span></h3>
                <h3 class="meta col-md-4 col-xs-6">Year Enrolled <span class="label label-default">{{ student.YearEnrolled }}</span></h3>
                <h3 class="meta col-md-4 col-xs-6">Class <span class="label label-default">{{ student.EducationalLevel }}</span></h3>
                <h3 class="meta col-md-4 col-xs-6">Status <span class="label label-danger">{{ student.Status }}</span></h3>
            </div>
        </div>
      </div>

我不想写出所有代码，而是想用

这样的指令替换它

<students></students>

这是我的那个特定模块的控制器

angular.module('studentList',[]);
/*
app.service('studentListService',['$http',function($http){
    return $http.get('http://localhost/database2/php/students.php')
        .success(function(data){
            return data;
        })
        .error(function(err){
            return err;
        });
}])
*/
app.controller('studentsController', ['$scope',function($scope){
    $scope.title = 'Student List';
    $scope.students = [
        {
            "id":"2015552117",
            "FirstName":"Alexia",
            "MiddleName":"Gino",
            "LastName":"Bella",
            "Gender":"Male",
            "DateofBirth":"2015-04-30",
            "State":"Abuja",
            "YearEnrolled":"0000",
            "EducationalLevel":"JS 2",
            "lga":"Tema",
            "Status":"Oweing"
        },
        {
            "id":"2015551756",
            "FirstName":"Anthiny",
            "MiddleName":"akp",
            "LastName":"tony",
            "Gender":"male",
            "DateofBirth":"2015-04-28",
            "State":"Ekiti",
            "YearEnrolled":"0000",
            "EducationalLevel":"SS 3",
            "lga":"itu",
            "Status":"Oweing"
        },
        {
            "id":"2015551627",
            "FirstName":"Anthony",
            "MiddleName":"Atang",
            "LastName":"Akpan",
            "Gender":"male",
            "DateofBirth":"2015-01-10",
            "State":"Akwa Ibom",
            "YearEnrolled":"0000",
            "EducationalLevel":"SS 2",
            "lga":"jega",
            "Status":"Graduated"
        }
    ];
}]);

app.directive('students', function(){
    console.log("Returning Student Array");
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl:'/student.html'
    };
});

我对 Angular 还是很陌生，所以希望能提供一些帮助我上次没有以正确的方式提出问题，所以我必须追溯

Answer 1

我为您的代码创建了一个基本的 plunker，并创建了一个变体。

首先，在不使用指令范围的情况下正确工作的副本：

http://plnkr.co/edit/NlkEATHYm9DJwpscHfLu?p=preview

<body ng-app="studentList">
  <div ng-controller="studentsController">
    <Students></Students>
    </div>
</body>

app.directive('students', function(){
    console.log("Returning Student Array");
    return {
        restrict: 'E',

        templateUrl:'student.html'
    };
});

其次，一个使用范围的例子。使用作用域的主要好处是您可以在同一页面上拥有指令的多个副本，并且每个副本都可以拥有自己的数据集。

http://plnkr.co/edit/y3fOotXybQeq5PY4JVlD?p=preview

<body ng-app="studentList">
  <div ng-controller="studentsController">
    <Students students=students></Students>
  </div>
</body>

app.directive('students', function(){
    console.log("Returning Student Array");
    return {
        restrict: 'E',
        scope: {
          students: '='
        },
        templateUrl:'student.html'
    };
});

在 Angular 中编写指令的正确方法

Corrent means of coding a directive in Angular

angularjs

directive