Question

我有两个指令。首先是使用（包括）第二个。

这是我的孩子指令：

angular.module('myApp')
  .directive('radioType', function() {
    return {
      restrict: 'E',
      scope: {
        question: '=',
        onAnswer: '&'
      },
      template: [
        '<div>{{vm.question.text}}<br/>',
        '<div>',
        '<button ng-repeat="a in vm.question.answers track by $index" ng-click="onSelected(a)">{{a.text}}</button>',
        '</div>',
        '<button ng-click="myFunction()">Radio</button>',
        '</div>'
      ].join(''),
      controller: ['$scope', function($scope) {
        $scope.myFunction = function() {
          console.log("hello from radio controller");
          $scope.vm.onAnswer();
        };
        $scope.onSelected = function(question) {
          $scope.vm.question.answer = question.text;
          console.log(question);
        };
      }],
      controllerAs: 'vm',
      bindToController: true
    };
  });

这是我的主要指示：

angular.module('myApp')
.directive('question', function($compile) {
  var combo = '<div>COMBO - {{vm.content.text}}</div>';
  var radio = [
    '<radio-type question="vm.content" onAnswer="vm.onAnswer()"></radio-type>'
  ].join('');
  var input = [
    '<input-type question="vm.content"></input-type>',
  ].join('');

  var getTemplate = function(contentType) {
    var template = '';

    switch (contentType) {
      case 'combo':
        template = combo;
        break;
      case 'radio':
        template = radio;
        break;
      case 'input':
        template = input;
        break;
    }

    return template;
  }

  var linker = function(scope, element, attrs) {

    scope.$watch('vm.content', function() {
      element.html(getTemplate(scope.vm.content.type))
      $compile(element.contents())(scope);

    });
  }

  return {
    restrict: "E",
    link: linker,
    scope: {
      content: '='
    },
    controller: ['$scope', function($scope) {
      $scope.onAnswer = function() {
        console.log("answer");
      };
    }],
    controllerAs: 'vm',
    bindToController: true
  };
})

Inside child指令我有按钮，当有人点击其中一个按钮时，我想从main指令调用函数。我已在我的子指令中包含onAnswer: '&'，并且我在主目录模板中分配了功能，但我可以使其正常工作。

以下是Plunker显示我的问题：http://plnkr.co/edit/iWU4L3IJLHtADHBl2dIh?p=preview

欢迎任何其他建议。

Answer 1

scripts.js上有2个错误。

在第6行，你的属性不应该是camelCase：

'<radio-type question="vm.content" on-answer="vm.onAnswer()"></radio-type>'

并且在第46行，你的函数应该在对象vm内：

$scope.vm.onAnswer = function() {

检查此弹射器：http://plnkr.co/edit/8O7BRjfE3ZWFLrvMkbXB?p=preview

内部指令与主指令的通信 - 调用函数

1 个答案: