如何使用kendo-UI打開外部Angularjs html文件

我是新的使用Angularjs和KendoUI，我想用kendoUI打開多個窗口並在其中添加一個angularjs html外部文件，問題是當我嘗試打開窗口，窗口內部的html頁面可以正確打開，但其中的角碼不起作用。如何使用kendo-UI打開外部Angularjs html文件

這是我的主網頁的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script> 
</head> 
<body> 

<div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl">  
     <div class="demo-section k-content"> 
      <button class="k-button" ng-click="open()">Content</button> 
     </div> 
     <p>{{ data.fName }}</p> 

    </div> 
    <style> 
     .example { 
      min-height: 400px; 
     } 
    </style> 
</div> 

<script> 
    angular.module("KendoDemos", [ "kendo.directives" ]) 
     .controller("MyCtrl", function($scope){ 
      var noteNumber = 0; 
      $scope.data= { 
        fName : 'hello' 
       } 

      $scope.open=function(){ 

      var noteWindowDivId = "noteWindow" + noteNumber; 

$("<div id=noteWindowDivId />").appendTo(document.body).kendoWindow ({ 
     draggable: true, 
     resizable: true, 
     width: "500px", 
     height: "375px", 
     title: "Multiventanas", 
     scrollable: true, 
     modal: false, 
     content : "databinding.html" , 
     actions: ["Minimize", "Maximize", "Close"] 
    });  
    $("#noteWindowDivId").data("kendoWindow"); 
    noteNumber++; 

} 
     }) 

</script> 

</body> 
</html>

這是我的角外部文件「databinding.html」：

<div ng-app="invoice1" ng-controller="InvoiceController as invoice"> 
     <script src="js/angular.js" type="text/javascript"></script> 
     <script src="js/invoice1.js" type="text/javascript"></script> 
    <b>Invoice:</b> 
    <div> 
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required > 
    </div> 
    <div> 
    Costs: <input type="number" min="0" ng-model="invoice.cost" required > 
    <select ng-model="invoice.inCurr"> 
     <option ng-repeat="c in invoice.currencies">{{c}}</option> 
    </select> 
    </div> 
    <div> 
    <b>Total:</b> 
    <span ng-repeat="c in invoice.currencies"> 
     {{invoice.total(c) | currency:c}} 
    </span> 
    <button class="btn" ng-click="invoice.pay()">Pay</button> 
    </div> 
</div>

的東西是databinding.html節目時在窗口中，所有在角度上做的數據綁定都會丟失，並且任何角度工作，所以我希望你告訴我，如果我做錯了什麼，或者我怎麼能把這個html放在kendo窗口中，並且角碼能夠正常工作。

謝謝。

來源

2016-03-06 Luis Interiano

最後我做這個測試時採取這種便條KendoUi網頁：http://docs.telerik.com/kendo-ui/AngularJS/how-to/window-service

當您創建劍道窗口，在定義你要引用是要綁定到數據視圖或模板控制器你想要在窗口中顯示。

這是我的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script> 
    <script src="js/kendoUI/angular-kendo-window.js" type="text/javascript"></script> 
    <script src="js/angular.js" type="text/javascript"></script> 
</head> 
<body> 

<div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl"> 

     <div class="demo-section k-content"> 
      <button class="k-button" ng-click="open()">Contenido</button> 
     </div> 
     <p>{{ fName }}</p> 

    </div> 
    <style> 
     .example { 
      min-height: 400px; 
     } 
    </style> 


</div> 

<script> 
    var MyApp = angular.module("KendoDemos", [ "kendo.window", "kendo.directives" ]); 
    MyApp.controller("MyCtrl", MyCtrl); 
    MyApp.controller("InvoiceController", InvoiceController); 

    function MyCtrl($scope, $kWindow) { 
      var noteNumber = 0; 
      //$scope.hello = "Hello from Controller!"; 
      $scope.fName = 'Esta es una prueba data from parent window to child'; 
      var noteWindowDivId = "noteWindow" + noteNumber; 

      $scope.open=function(){ 

     var windowInstance = $kWindow.open({ 
         options:{ 
         draggable: true, 
         resizable: true, 
         width: "500px", 
         height: "375px", 
         title: 'Multiventanas', 
         scrollable: true, 
         actions: ["Minimize", "Maximize", "Close"], 
         visible: false 
         }, 
         templateUrl: 'template/window/databinding2.html', 
         controller: 'InvoiceController', 
         resolve: { 
          message: function() { 
           return $scope.fName; 
          } 
         } 
        }); 

}; 
     } 

    function InvoiceController($scope, message) { 
    $scope.message333 = message; 
    $scope.qty = 1; 
    $scope.cost = 2; 
    $scope.inCurr = 'EUR'; 
    $scope.currencies = ['USD', 'EUR', 'CNY']; 
    $scope.usdToForeignRates = { 
     USD: 1, 
     EUR: 0.74, 
     CNY: 6.09 
    }; 

    $scope.total = function total(outCurr) { 
     return $scope.convertCurrency($scope.qty * $scope.cost, $scope.inCurr, outCurr); 
    }; 
    $scope.convertCurrency = function convertCurrency(amount, inCurr, outCurr) { 
     return amount * $scope.usdToForeignRates[outCurr]/$scope.usdToForeignRates[inCurr]; 
    }; 
    $scope.pay = function pay() { 
     window.alert("Thanks!"); 
    }; 


} 


MyCtrl.$inject = ['$scope', '$kWindow']; 
</script> 



</body> 
</html>

databinding2.html

<div> 
    <b>Invoice:</b> 
    <div> 
    Quantity: <input type="number" min="0" ng-model="qty" required > 
    </div> 
    <div> 
    Costs: <input type="number" min="0" ng-model="cost" required > 
    <select ng-model="inCurr"> 
     <option ng-repeat="c in currencies">{{c}}</option> 
    </select> 
    </div> 
    <div> 
    <b>Total:</b> 
    <span ng-repeat="c in currencies"> 
     {{total(c) | currency:c}} 
    </span> 
    <button class="btn" ng-click="pay()">Pay</button> 
    </div> 
    <h3>{{message333}}</h3> 
</div>

你不必寫一個完整的HTML格式，你外部HTML文件（兒童），因爲它取決於它的父母形式。我希望這個例子可以幫助別人！祝你今天愉快。

來源

2016-03-09 18:52:36

如何使用kendo-UI打開外部Angularjs html文件

回答

相關問題