angular1 with electron:ng-dblclick无效

时间:2017-06-30 17:05:48

标签: angularjs electron angularjs-ng-click

我使用角度为1.6.4的电子。

我有一个控制器,我在其中动态生成<?xml version="1.0" encoding="utf-8" standalone="no"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:versionCode="43" android:versionName="2.2.2" package="ca.bell.selfserve.mybellmobile.poc2"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/>\ <uses-permission android:name="android.permission.SET_DEBUG_APP"/> <uses-permission android:description="@string/wifi_state_desc" android:label="@string/wifi_state_label" android:name="android.permission.CHANGE_WIFI_STATE" android:protectionLevel="signature"/> <uses-permission android:description="@string/wifi_state_desc" android:label="@string/wifi_state_label" android:name="android.permission.CHANGE_NETWORK_STATE" android:protectionLevel="signature"/> <uses-permission android:name="android.permission.WRITE_SETTINGS" android:protectionLevel="signature"/> <uses-permission android:description="@string/loc_permission_desc" android:label="@string/loc_permission_label" android:name="android.permission.ACCESS_COARSE_LOCATION" android:protectionLevel="dangerous"/> <uses-permission android:description="@string/loc_permission_desc" android:label="@string/loc_permission_label" android:name="android.permission.ACCESS_FINE_LOCATION" android:protectionLevel="dangerous"/> <application android:allowBackup="true" android:fullBackupContent="@xml/full_backup_content" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:name="com.pega.mobile.ContainerApplication" android:theme="@style/AppTheme" tools:ignore="UnusedAttribute"> <activity android:configChanges="orientation|screenSize|keyboardHidden" android:launchMode="singleTop" android:name="com.pega.mobile.MainActivity" android:screenOrientation="portrait" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <provider android:authorities="ca.bell.selfserve.mybellmobile.fileProvider" android:exported="false" android:grantUriPermissions="true" android:name="android.support.v4.content.FileProvider"> <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"/> </provider> </application> </manifest> 。我想在此列表项上绑定双击事件,但我无法成功。

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中定义openItem。但是我希望在renderer.js内定义它,以保持一些顺序并能够访问注入的服务。

这可能吗?阻力可能会干扰吗?

1 个答案:

答案 0 :(得分: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>

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

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

在使用angular wrapper指令修补它之前,ondragstart也不会调用您的控制器方法。那里有第三方库,您可以使用其中任何一个。