Question

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

我该如何解决这个问题？

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


    }

});

Answer 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，否则请使用隔离范围并将其传递给模板。< / p>

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

的文档

Answer 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>

如何访问子范围？

2 个答案: