Question

所以我一直在教自己创建自定义指令和隔离范围。目前，我的布局包含一个包含测验问题（多项选择或文本输入）的指令，然后是包含所有导航按钮的另一个指令。这两个指令都有孤立的范围。我想要做的是在导航指令中创建一个提交按钮，告诉我的测验指令运行它的等级功能。例如，我的测验指令有一个部分：

controller: function($scope) {
 $scope.gradeQuiz = function(user input) {...function that grades input data and reveals feedback divs}
}

然后在我的导航指令的模板中，我有一个按钮，其中ng-click =＆＃34;告诉测验指令运行其成绩函数＆＃34;

我试图将我的评分功能拉到他们共享的父作用域。但是为了使我的响应能够起作用，我必须将几个用户输入变量移到父作用域中，我已经开始工作了，但它创造了一堆很难的代码。阅读并遵循。

Answer 1

通常，您不希望您的指令执行繁重的工作（在这种情况下，评分）。至少它应该由控制器完成，但在服务中更好。

您希望控制器负责加载/初始化模型，并将其公开给您的问题指令以进行绑定。然后，您可以提供对导航指令的回调，这将触发评分逻辑。

例如：

app.directive('navigation', function() {
  return {
    restrict: 'E',
    scope: {
      onSubmit: '&'
    },
    template: '<button ng-click="onSubmit()">Submit</button>'
  };
});

app.directive('questions', function() {
  return {
    restrict: 'E',
    scope: {
      quiz: '='
    },
    template: '<div>Questions here!</div>'
  };
});

app.service('GradingService', function() {
  return {
    gradeQuiz: function(quiz) {
      //do your heavy lifting here, this is just an example
      return quiz.length;
    }
  };
});

app.controller('MainCtrl', function($scope, GradingService) {
  $scope.gradeQuiz = function() {
    $scope.score = GradingService.gradeQuiz($scope.quizModel);
  };
  $scope.quizModel = [1, 2, 3];
});

HTML：

<body ng-controller="MainCtrl">
  <questions quiz="quizModel"></questions>
  <navigation on-submit="gradeQuiz()"></navigation>
  <div ng-bind="score"></div>
</body>

上述工作内容：http://plnkr.co/edit/VtZdoY?p=preview

在angularjs中，有没有办法调用另一个自定义指令编写的函数？

1 个答案: