angular1 与电子：ng-dblclick 不工作

Question

我正在使用角度为 1.6.4 的电子。

我有一个控制器，我在其中动态生成li。我想在这个列表项上绑定一个双击事件，但是我没有成功。

function TheController($http, $scope, KeyService) {
  $scope.openItem = function(id) {
    console.log(id);
  }
  var key = KeyService.getLastKey();
  connectToBackend($http,key);

}

function connectToBackend($http, key) {
   $http.get(ENDPOINT).then(
      function(result) {
        //do some work
        document.getElementById("list").innerHTML += `<li draggable="true" ondragstart="itemDrag(event)" id=${theID} ng-dblclick="openItem(this.id)"><i class="fa fa-folder-open"></i> ${result}</li><hr>`;
    }, 
    function(e) {
       //error 
    }
   );

}

如果我双击这里，绝对不会发生任何事情——甚至没有异常。

如果我使用ondblclick，如果我在renderer.js 中定义openItem，它就可以工作。但我更愿意在 TheController 中定义它，以保持一些秩序并能够访问注入的服务。

这可能吗？阻力的东西可能会干扰吗？

Answer 1

在编译之前，直接附加的 html 将不起作用。您应该在将其注入 DOM 树之前手动编译它。

document.getElementById("list")
.appendChild($compile(`
  <li draggable="true" ondragstart="itemDrag(event)" 
     id=${theID} ng-dblclick="openItem(this.id)">
        <i class="fa fa-folder-open"></i> ${result}
  </li>
<hr>`)($scope);

---

通常，直接从控制器进行 DOM 操作是反模式，因为它使您的控制器代码与 view/html 更紧密地耦合。

我建议您使用ng-inlcude 指令并将自定义模板放在ng-template 脚本中。这样它就可以在角度的$templateCache 内随时可用。

<script id="myCustom.html" type="text/ng-template">
  <li draggable="true" ondragstart="itemDrag(event)" 
     id="{{theId}}" ng-dblclick="openItem(id)">
        <i class="fa fa-folder-open"></i>
        <div ng-include="ENDPOINT"></div>
  </li>
</script>

然后您的 html 将如下所示。

HTML

<div id="list">

   ... Your content .. 

</div>
<div ng-include="'myCustom.html'"></div>

如果你注意到了，我直接在ng-include 内部直接使用了ENDPOINT，同样可以工作，你必须做一些额外的设置

angular.module('myApp').config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow loading from outer templates domain.
    'http://somedomain.com/templates/**' //ENDPOINT domain should white listed here
  ]); 
});

另外ondragstart 不会调用你的控制器方法，直到你用角度包装器指令修补它。那里有可用的第三方库，您可以使用其中任何一个。