Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/azure/12.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 添加指令后元素的ID为何发生变化_Javascript_Angularjs_Angularjs Directive - Fatal编程技术网

Javascript 添加指令后元素的ID为何发生变化

Javascript 添加指令后元素的ID为何发生变化,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我使用ng repeat创建了许多div。这些div的ID是这样分配的 id={{""+date.getDate()+"-"+date.getMonth()+"-"+date.getFullYear()+"-"+time+":00"}} 因此div的ID变成这样ID=“10-0-2014-00:00” 但当我在div中添加droppable(custome指令)时,ID变成了这个ID=“--:30”。可能是什么问题?有什么办法可以避免这个问题吗 可删除指令- app.directive('dr

我使用
ng repeat
创建了许多div。这些div的ID是这样分配的

id={{""+date.getDate()+"-"+date.getMonth()+"-"+date.getFullYear()+"-"+time+":00"}}
因此div的ID变成这样
ID=“10-0-2014-00:00”

但当我在div中添加
droppable
(custome指令)时,ID变成了这个
ID=“--:30”
。可能是什么问题?有什么办法可以避免这个问题吗

可删除指令-

app.directive('droppable', function() {
  return {
    scope: {
      drop: '&',
      bin: '='
    },
    link: function(scope, element) {
      // again we need the native object
      var el = element[0];

      el.addEventListener(
        'dragover',
        function(e) {
          e.dataTransfer.dropEffect = 'move';
          // allows us to drop
          if (e.preventDefault) e.preventDefault();
          return false;
        },
        false
      );

      el.addEventListener(
        'dragenter',
        function(e) {

          return false;
        },
        false
      );

      el.addEventListener(
        'dragleave',
        function(e) {

          return false;
        },
        false
      );

      el.addEventListener(
        'drop',
        function(e) {
          // Stops some browsers from redirecting.
          if (e.stopPropagation) e.stopPropagation();


          var binId = this.id;
          console.log(this)
          var item = document.getElementById(e.dataTransfer.getData('Text'));
          console.log(item)
          //this.appendChild(item);
          // call the passed drop function
          scope.$apply(function(scope) {
            var fn = scope.drop();
            if ('undefined' !== typeof fn) {            
              fn(item.id, binId);
            }
          });

          return false;
        },
        false
      );
    }
  }
});

不要在指令中使用
范围:{}
属性。它将创建一个全新的作用域,该作用域不会从父作用域继承。这就是为什么date根本不出现在您的新范围中:

隔离作用域并不典型地从父作用域继承,而是创建一个全新的作用域。创建此隔离作用域将确保您的指令不会与现有作用域冲突

只需删除scope对象,它就会按预期工作


来源:

只需调用返回函数。您不需要指令的作用域。每次分配Dropable指令时,它都会创建新的作用域。

是否有意为此指令创建自己的(独立)作用域?如果不是,我建议您删除指令的scope属性<代码>日期可能不存在于您的独立作用域中。是否可以在作用域对象中定义日期?或者有没有其他方法可以在不删除作用域的情况下执行此操作?您的方法正在工作,我的意思是在删除作用域后,ID将按预期创建。但是它给了我很多错误。有没有办法在这个范围内定义/添加日期?我刚刚请你发布错误。尽管您坚持:您可能能够执行
$scope.date=$parent.date或类似的东西。