带电子的 angular1：ng-dblclick 不工作

Question

我在 angular 1.6.4.

中使用 electron

我有一个控制器，我在其中动态生成 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 脚本中。这样它就可以在 angular 的 $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 不会调用您的控制器方法，直到您使用 angular 包装器指令对其进行修补。有可用的第三方库，您可以使用其中任何一个。

带电子的 angular1：ng-dblclick 不工作

angular1 with electron: ng-dblclick not working

angularjs

angularjs-ng-click

electron