如何访问子范围？答案

【问题标题】：How to access child scope?如何访问子范围？
【发布时间】：2023-04-08 01:47:02
【问题描述】：

在下面的代码中，我试图在指令（子范围）中获取控制台日志，我需要获取范围详细信息。我也尝试在指令中向函数添加范围变量，但没有工作。

我该如何解决这个问题？

myDirective.html

<html ng-app="MyAppdr">
    <head>
      <script src="angular.js"></script>
      <script src="appdr.js"></script>
    </head>
    <body ng-controller="dirCtrl">
      <h1>hello</h1>
      <employee-card></employee-card>
      <!--div employee-card></div>
      <div class="employee-card"></div--->
    </body>
<html>

employee_info.html

    <b>{{employee.name}}</b> - {{employee.job}}
    <br/><br/>
    <div ng-show='!!employee.followers'>
      followers
      <ul>
        <li ng-repeat='name in employee.followers'>{{name}}</li>
      </ul>
      <button ng-click="follow('Galaa')">follow</button>
    </div>
</div>

appdr.js

name="MyAppdr";
requires=[];

appdr=angular.module(name,requires);

appdr.controller("dirCtrl",function($scope){
    console.log("This is controller dirCtrl");
    $scope.employee={
      name:"subo",
      job:"cat",
      followers:["chin","adyakshaka","aluu"]
    }
    console.log("parent ",$scope);
    /*
    $scope.follow=function(name){
        $scope.employee.followers.push(name);
    }
*/
});

appdr.directive("employeeCard",function(){
    //$scope.employee={};
    console.log("child ",$scope);
    return{
      templateUrl:'employee_info.html',
      restrict:"AEC",
      //replace:true,
      controller:function($scope){
        $scope.follow=function(name){
            $scope.employee.followers.push(name);
        }

      },
      scope:true


    }

});

【问题讨论】：

标签： html angularjs angularjs-scope angular-directive

【解决方案1】：

将console.log() 移动到指令的controller 内。

appdr.directive("employeeCard", function() {
  return {
    templateUrl: 'employee_info.html',
    restrict: "AEC",
    //replace:true,
    controller: function($scope) {
      console.log("child ", $scope);
      $scope.follow = function(name) {
        $scope.employee.followers.push(name);
      }
    },
    scope: true
  }
});

如果页面上只有一张employee 卡片，则保留scope: true，否则如果您需要在同一页面中显示多张卡片，请使用隔离范围并将其传递到模板中。

appdr.directive("employeeCard", function() {
  return {
    templateUrl: 'employee_info.html',
    restrict: "AEC",
    //replace:true,
    controller: function($scope) {
      console.log("child ", $scope);
      $scope.follow = function(name) {
        $scope.employee.followers.push(name);
      }
    },
    scope: {
      employee: "="
    }
  }
});

在 html 中使用类似的东西

<employee-card employee="employee"></employee-card>

参考指令here的文档

【讨论】：

【解决方案2】：

对于您的特定情况，如果您没有在同一页面中显示多张卡片，使用 scope: false 似乎就足够了。

appdr.directive("employeeCard",function() {
  return  {
    scope: false,
    // other attributes

如果您需要在同一页面中显示多张卡片，请使用隔离范围并传入

appdr.directive("employeeCard",function() {
  return  {
    scope: {
      employee: '='
    },
    // other attributes

<employee-card employee="employee"></employee-card>

【讨论】：