9

私のフィドルを見て、ネストされたディレクティブ「choice」から関数myAlertにアクセスする方法を見つけるのを手伝ってください。http://jsfiddle.net/zbD95/6/のようなスコープのいくつかのプロパティを共有するいくつかのソリューションが見つかりましたが、スコープの関数とプロパティを一緒に使用する必要があります。

ありがとう！！！

これが私のフィドルの複製です：フィドルのHTML部分：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MainCtrl">
  <choice-tree ng-model="myTree"></choice-tree>  
  <hr />
  <!--$scope.myTree = {{myTree | json}}-->
</body>
</html>

フィドルのJS部分：

var app = angular.module('plunker', []);

function Choice(name, children) {
  this.name = name;
  this.checked = false;
  this.children = children || [];
}

var apparel = new Choice('Apparel', [
  new Choice('Mens Shirts', [
    new Choice('Mens Special Shirts'),
  ]),
  new Choice('Womens Shirts'),
  new Choice('Pants')
]);
var boats = new Choice('Boats');

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.myTree = [apparel, boats]; 

  $scope.myAlert = function(ev){
    alert('ad');
  };
});

app.directive('choiceTree', function() {
      return {
          template: '<ul><choice ng-repeat="choice in tree"></choice></ul>',
        replace: true,
        transclude: true,
        restrict: 'E',
        scope: {
          tree: '=ngModel'
        }
      };
});

app.directive('choice', function($compile) {
  return { 
    restrict: 'E',
     transclude: true,
    //In the template, we do the thing with the span so you can click the 
    //text or the checkbox itself to toggle the check
    template: '<li>' +
      '<span ng-click="myAlert(choice)">' +
      '<input type="checkbox" ng-checked="choice.checked"> {{choice.name}} - {{name}}' +
      '</span>' +
    '</li>',
      link: function (scope, elm, attrs) {

      //Add children by $compiling and doing a new choice directive
      if (scope.choice.children.length > 0) {
        var childChoice = $compile('<choice-tree ng-model="choice.children"></choice-tree>')(scope)
        elm.append(childChoice);
      }
    }
  };
});
4

1 に答える 1

9

'＆'構文を使用して、分離スコープが親スコープで定義されたメソッドを呼び出せるようにします。また、これらのディレクティブのトランスクルージョンは必要ありません。

HTML：

<choice-tree ng-model="myTree" my-alert="myAlert()"></choice-tree>

指令：

app.directive('choiceTree', function () {
    return {
        template: '<ul><choice ng-repeat="choice in tree"></choice></ul>',
        replace: true,
        //transclude: true,
        restrict: 'E',
        scope: {
            tree: '=ngModel',
            myAlert: '&'
        },
    };
});

app.directive('choice', function ($compile) {
    return {
        restrict: 'E',
        //transclude: true,
        template: '<li>' +
            '<span ng-click="myAlert()">' +
            '<input type="checkbox" ng-checked="choice.checked"> {{choice.name}} - {{name}}' +
            '</span>' +
            '</li>',
        link: function (scope, elm, attrs) {
            //Add children by $compiling and doing a new choice directive
            if (scope.choice.children.length > 0) {
                var childChoice = $compile('<choice-tree ng-model="choice.children" my-alert="myAlert()"></choice-tree>')(scope)
                elm.append(childChoice);
            }
        }
    };
});

フィドル。

于 2013-01-31T18:49:28.303 に答える