控制器内部与指令外部

时间:2015-07-03 06:50:28

标签: angularjs angularjs-directive angularjs-scope

当我在我的指令之外声明控制器时,第一个代码工作正常但是当我把相同的指令放在里面(在第二个代码中)它停止显示任何结果时,我可能会遗漏非常愚蠢的事情,请帮助我。

第一个代码:

<html>
<body>
<div ng-app="mainApp" ng-controller="StudentController">
    <student name="Mahesh"></student>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
  var mainApp = angular.module("mainApp", []);

  mainApp.directive('student', function() {
     return{
     restrict : 'E',
     template : "Student: <b>{{student.name}}</b>",

     scope : {
        student : "=name",
            }
        };
  });

  mainApp.controller('StudentController', function($scope) {
        $scope.Mahesh = {};
        $scope.Mahesh.name = "Mahesh Parashar";
  });

</script>
</body>
</html>

第二段代码:

<html>
<body>
<div ng-app="mainApp" ng-controller="StudentController">
    <student name="Mahesh"></student>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
  var mainApp = angular.module("mainApp", []);

  mainApp.directive('student', function() {
     return{
     restrict : 'E',
     template : "Student: <b>{{student.name}}</b>",

     scope : {
        student : "=name",
            },
    controller: ['StudentController', function($scope) {
        $scope.Mahesh = {};
        $scope.Mahesh.name = "Mahesh Parashar";
        }]
    };
  });

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

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

mainApp.directive('student', function() {
  return{
    restrict : 'E',
    template : "Student: <b>{{student.name}}</b>",
    scope : {
     student : "=name",
    },
    controller: function($scope) {
      $scope.student = {};
      $scope.student.name = "Mahesh Parashar";
   }
};

});




<div ng-app="mainApp">
  <student name="Mahesh"></student>
</div>

尝试,它会起作用

Pluner