Question

我正在创建一个包含许多不同问题的清道夫狩猎编辑器。而且，每个问题可以是不同类型的。因此，我有一系列问题，我做了一个ng-repeat来显示所有问题。

为此，我有一个代表问题的javascript对象。这个问题可以通过不同的问题类型继承。

我有一个特定的问题类型，即slidingPuzzle，需要上传图片。我的问题到了这里，我希望能够在输入文件发生变化时调用此对象内的函数。

我希望在此重点强调它不能是范围内声明的一般功能！

以下是我的结构（http://plnkr.co/edit/lnJ8rAlpP0xJ3aM2HZ7o?p=preview）的样子：

HTML：

      <div class="question" ng-repeat="question in scavengerHunt.questions">

        <div class="chooseQuestionType">
          Question type:
          <select ng-change="question.setChild()" ng-model="question.subClass">
            <option value="slidingPuzzleQuestion">slidingPuzzleQuestion</option>
          </select>
        </div>
        <div class="questionContainer">
            <div class="puzzleContainer">

                  <input type="file" name="image" id="puzzleContainerImage" ng-file-select="question.child.imageFileSelected()">

            </div>
        </div>

AngularJS模型：

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

scavengerHuntApp.controller('QuestionsCtrl', function ($scope) {
  function ScavengerHunt() {
                var self = this;

                self.questions = [];


                self.addQuestion = function(question) {
                    self.questions.push(question);
                }

            }
  function Question() {
                var self = this;

                self.id = 0;
                self.subClass = "slidingPuzzleQuestion";


                self.child = "";

                self.setChild = function() {
                    var type = self.subClass;

                    if(type == 'slidingPuzzleQuestion'){
                        self.child = new SlidingPuzzleQuestion();
                    }

                }
            }

            function SlidingPuzzleQuestion() {
                var self = this;


                self.imageFileSelected = function () {
                    console.log()
                };



            }


            //Utilities function
            $scope.addEmptyQuestion = function() {
                $scope.scavengerHunt.addQuestion(new Question());
            }

            $scope.scavengerHunt = new ScavengerHunt();

            $scope.addEmptyQuestion();

});

AngularJS指令

到目前为止，我认为我可能不得不使用AngularJS指令，因为ng-change目前不能用于输入文件（https://github.com/angular/angular.js/issues/1375）。因此，以下代码不起作用，因为在html标记ng-file-select="question.child.imageFileSelected()"中，我有一个在尝试将元素绑定到函数时丢失的上下文。

  scavengerHuntApp.directive("ngFileSelect",function(){

            return {
                link: function (scope, element, attrs) {

                    console.log(scope);
                    console.log(element);
                    var onChangeFunc = element.scope()[attrs.customOnChange];
                    element.bind('change', onChangeFunc); 

                }

            }


        });

那么，有没有办法在html代码中传递当前上下文以将其绑定到特定对象？

我希望一切都清楚，如果不让我知道，我会尽可能地澄清！

Answer 1

好的，看看这个plunker：http://plnkr.co/edit/qPK6EmAkt39QoZFZ5Sa3?p=preview

我已删除了一些代码，只是为了让您了解低级别的内容。

您可以使用使用&符号将隔离范围与回调属性绑定结合使用。它的作用是将属性中的表达式注册为指令的隔离范围内的可调用函数。

规则是：

您注册了隔离范围

scope : { myAttr : "&" }

您可以在表单
中指定属性
my-attr="object.objectMethod(param1, param2)"

Angular将objectMethod与可调用包装

包装在一起

如果需要，可以像这样调用包装器：

scope.myAttr({param1: "value", param2:"value"})

Angular将此调用转换为具有指定参数的实际object.objectMethod调用

AngularJS指令 - 在输入文件更改时调用特定函数

1 个答案: