Question

我的html视图如下

School.html

<html>
<body>
   <div class="col-xs-9">
   <!-- major bootstrap html code goes over here -->
   </div>

   <div class="col-xs-3">
       <!--Call to directive goes here--> 
       <div student-profile ngInit="studentId=profileId"></div>
    </div>
 </body>

</html>

控制器： SchoolController.js

(function() {

 var app = angular.module("SchoolApp")

 var SchoolController = function ($scope,$rootScope,...)
   {
      $scope.profileId = myData.profileId;
   }

studentprofileController.js

(function() {

 var app = angular
             .module("SchoolApp")
             .directive('studentProfile',studentProfileDirective)
      function studentProfileDirective(){
      return {  
           restrict :'AE',
           replace:'true',
           controller:studentProfileController,
           bindtocontroller:true,
           template:'student-profile.html'
      } 

studentProfileController.inject=['$scope','$rootScope',...];

function studentProfileController($scope,$rootScope,....)
       {
          var ProfileID = $scope.$parent.profileId;
           console.log("ProfileID",ProfileID);
       }  
   };

我尝试了$ scope。$ parent.profileId无效。我将ProfileID作为＆＃34; undefined＆＃34;。如何在子指令中获取父控制器的范围项profileId？

看起来我的身体控制器在我的指令加载后分配了profileId。因此，当第一次加载我的指令时，它不会从其parentcope获取任何profileId。如何在该场景中进行后续同步？

Answer 1

将身体控制器移动到body标签。

<html>
<body ng-app="SchoolApp" ng-controller="SchoolController">
   <div class="col-xs-9">
   <!-- major bootstrap html code goes over here -->
   </div>

   <div class="col-xs-3">
       <!--Call to directive goes here--> 
       <div student-profile ngInit="studentId=profileId"></div>
    </div>
 </body>
</html>

请务必声明。

(function() {

 var app = angular.module("SchoolApp")

 //Be sure to declare it
 app.controller("SchoolController", SchoolController);
 //

 var SchoolController = function ($scope,$rootScope,...)
   {
      $scope.profileId = myData.profileId;
   }

通过将ng-controller指令放在body层次结构的顶部，$compile服务将在编译其他指令之前首先实例化它。

Answer 2

构建自定义指令时，可以控制它是共享父作用域还是创建子作用域。默认情况下，它共享父视图的范围。如果在指令对象上设置scope: true，它将使用原型继承父视图范围的子范围。如果在指令对象上设置scope: {}，它会创建一个隔离范围，不会从父视图的范围继承任何内容。

因此，要根据声明指令的方式回答您的问题，您可以使用$ scope变量本身访问父作用域，因为它是共享的。

https://github.com/angular/angular.js/wiki/Understanding-Scopes#directives

AngularJS：如何从子指令访问父控制器的范围项？

2 个答案: