Question

我有两个html页面，main.html和nested.html，所以nested.html实际上包含在main.html中，这样：

main.html启动

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

main.html结束

完整代码

nested.html

<html>
<h1> I am included, but controller not sending the values to me. </h1>

<input type="text" id="myDatePicker"/>

</html>

main.html中

<html ng-controller="MainCtrl">
    <h1> I am main.html and controller working properly on me, please take care of my child **given below** </h1>

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

控制器代码：

(function() {
'use strict';
angular.module('bootstrapApp').controller('MainCtrl', MainCtrl);


function MainCtrl($scope, $location, $http, $compile) {

    $("#myDatePicker").datepicker({
        orientation: 'left'
    });


}

});

Controller代码使用jquery使文本字段成为一个日期选择器。输入字段位于nested.html页面中。如果控制器在包含的页面上工作，则文本字段将成为日期选择器。 就是这样

请指导我如何将相同的控制器 MainCtrl 应用于包含的nested.html页面

感谢。

Answer 1

这里有两件重要的事情需要提及：

MainCtrl 的控制器范围已应用于包含的nested.html。您可以在以下Plunker中查看：https://embed.plnkr.co/cvILaL3VvnJ5c1YDHDT1/。
您不应该使用AngularJS控制器中的jQuery日期选择器。而是使用适用于AngularJS的日期选择器（例如angular-datepicker）

Answer 2

根据我的猜测，您必须使用$scope.someVar并尝试在ng-include中呈现它。尝试在controller内创建一个obj，如下所示：

$scope.obj= { 
   someVar : 'Value'
};

并将其用于ng-include，即 nested.html 作为{{obj.someVar}}。

更新1

根据您的新更新，请尝试使用AngularJS datepicker告诉我。

Answer 3

尝试将控制器添加到nested.html文件中，如：

<div ng-controller="MainController">
  <h1> I am included, but controller not sending the values to me. </h1>
  <input type="text" id="myDatePicker"/>
</div>

来自你的评论：

如何使用ng-include将AngularJS控制器应用于包含的页面

3 个答案:

更新1