Jquery 如何使用剑道UI打开外部Angularjs html文件_Jquery_Angularjs_Kendo Ui_Angularjs Scope

Jquery 如何使用剑道UI打开外部Angularjs html文件

jquery angularjs kendo-ui

Jquery 如何使用剑道UI打开外部Angularjs html文件,jquery,angularjs,kendo-ui,angularjs-scope,Jquery,Angularjs,Kendo Ui,Angularjs Scope,我是使用Angularjs和KendoUI的新手，我正在尝试使用KendoUI打开多个窗口，并在其中添加Angularjs html外部文件，问题是当我尝试打开窗口时，窗口内的html页面正确打开，但其中的Angularjs代码不起作用这是我的主页index.html： <!DOCTYPE html> <html> <head> <style>html { font-size: 14px; font-family: Arial, Helv

我是使用Angularjs和KendoUI的新手，我正在尝试使用KendoUI打开多个窗口，并在其中添加Angularjs html外部文件，问题是当我尝试打开窗口时，窗口内的html页面正确打开，但其中的Angularjs代码不起作用

这是我的主页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>


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
内容
{{data.fName}
.举例{
最小高度：400px；
}
angular.module（“KendoDemos”[“kendo.directives”]）
.controller（“MyCtrl”，函数（$scope）{
var noteNumber=0；
$scope.data={
fName:'你好'
}
$scope.open=function（）{
var noteWindowDivId=“noteWindow”+noteNumber；
$（“”）.appendTo（document.body）.kendoWindow({
真的，
可调整大小：正确，
宽度：“500px”，
高度：“375px”，
标题：“Multiventanas”，
可滚动：对，
莫代尔：错，
内容：“databinding.html”，
操作：[“最小化”、“最大化”、“关闭”]
});    
$（“#noteWindowDivId”）.data（“kendoWindow”）；
noteNumber++；
}
})

这是我的外部文件“databinding.html”：


发票：
数量：
成本：
{{c}}
总数：
{{发票总额（c）{货币：c}
支付

问题是当databinding.html显示在窗口中时，angular中的所有数据绑定都会丢失，angular上的任何东西都会正常工作，因此我希望您告诉我我是否做错了什么，或者我如何将该html放在剑道窗口中，并且angular代码正常工作

谢谢。

最后，我做了这个练习，在KendoUi网页上记下了这个笔记：

创建剑道窗口时，必须在定义中引用将数据绑定到要在窗口中显示的视图或模板的控制器

这是我的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>


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
孔蒂多
{{fName}}
.举例{
最小高度：400px；
}
var MyApp=angular.module（“KendoDemos”，“kendo.window”，“kendo.directives”）；
MyApp.controller（“MyCtrl”，MyCtrl）；
MyApp.controller（“InvoiceController”，InvoiceController）；
函数MyCtrl（$scope$kWindow）{
var noteNumber=0；
//$scope.hello=“来自控制器的你好！”；
$scope.fName='Esta es una prueba data from parent window to child'；
var noteWindowDivId=“noteWindow”+noteNumber；
$scope.open=function（）{
var windowInstance=$kWindow.open({
选项：{
真的，
可调整大小：正确，
宽度：“500px”，
高度：“375px”，
标题：“多文塔纳”，
可滚动：对，
操作：[“最小化”、“最大化”、“关闭”]，
可见：假
},
templateUrl:'template/window/databinding2.html'，
控制器：“发票控制器”，
决心：{
消息：函数（）{
返回$scope.fName；
}
}
});
};
}
函数InvoiceController（$scope，message）{
$scope.message333=消息；
$scope.qty=1；
$scope.cost=2；
$scope.incur=‘欧元’；
$scope.currences=[‘美元’、‘欧元’、‘人民币’]；
$scope.usdToForeignRates={
美元：1，
欧元：0.74，
人民币：6.09元
};
$scope.total=函数总计（outCurr）{
返回$scope.convertCurrency（$scope.qty*$scope.cost、$scope.incrur、outCurr）；
};
$scope.convertCurrency=函数convertCurrency（金额、发生额、流出额）{
返回金额*$scope.usdToForeignRates[汇出]/$scope.usdToForeignRates[汇出]；
};
$scope.pay=函数pay（）{
注意（“谢谢！”）；
};
}
MyCtrl.$inject=['$scope'，'$kWindow']；

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>


发票：
数量：
成本：
{{c}}
总数：
{{总额（c）|货币：c}
支付
{{message333}}

您不必在编写外部html文件（子文件）时编写整个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>