Question

我通过创建<dragItem>指令和<droptTraget>指令来创建拖放功能，但我还不了解如何以这种方式使用内部和外部范围。

这是我的指示。事件正确地触发了函数，我只希望on dragstart事件存储drag元素的值和drop事件来触发函数testAddSet()，它将拖动值添加到我的模型。

拖

angular.module('app.directives.dragItem', [])
  .directive('dragItem', function(){
    return { // this object is the directive
      restrict: 'E',
      scope: {
        excercise: '='
      },
      templateUrl: "templates/dragTile.html",
      link: function(scope, element, attrs){
        element.on('dragstart', function (event) {
        var dataVar = element.innerText; 
          // It's here that I want to send a dataVar to the $scope
        });
      }
    };
  });

放弃

angular.module('app.directives.dropTarget', [])
  .directive('dropTarget', function(){
    return { // this object is the directive
      restrict: 'E',
      scope: {
        day: '='
      },
      templateUrl: "templates/calDay.html",
      link: function(scope, element, attrs){
        element.on('drop', function (event) {
            event.preventDefault();
            // It's here that I'd like to take the value from the drag item and update my model
           testAddSet() // doesn't work
           $parent.testAddSet() // doesn't work
        });
        element.on('dragover', function (event) {
          event.preventDefault();
        });
      }
    };
  });

Answer 1

由于您使用的是隔离范围，因此需要为函数绑定定义一个属性。

angular.module('app.directives.dropTarget', [])
  .directive('dropTarget', function(){
    return { // this object is the directive
      restrict: 'E',
      scope: {
        day: '=',
        //Add binding here
        testAddSet: '&'
      },
      templateUrl: "templates/calDay.html",
      link: function(scope, element, attrs){
        element.on('drop', function (event) {
            event.preventDefault();
            //Invoke the function here
            scope.testAddSet({arg: value, $event: event});
        });
        element.on('dragover', function (event) {
          event.preventDefault();
        });
      }
    };
  });

在模板中，使用指令属性连接函数。

<drop-target test-add-set="fn(arg, $event)" day="x"></drop-target>

有关隔离范围绑定的更多信息，请参阅AngularJS $compile Service API Reference - scope。

我建议将事件对象公开为$event，因为这是AngularJS事件指令的习惯。

$事件

ngClick和ngFocus等指令在该表达式的范围内公开$event对象。当jQuery存在或类似的jqLite对象时，该对象是jQuery Event Object的实例。

- AngularJS Developer Guide -- $event

Answer 2

我认为获得交叉指令通信的最简单方法是在主页上创建一个范围变量，然后将其双重绑定（＆＃39; =＆＃39;）到两个指令。这样，他们都可以在变化时访问它。

如何使用指令定义的事件来更新我的模型

2 个答案:

$事件