Javascript 为什么模块不能正常工作？_Javascript_Html_Angularjs

Javascript 为什么模块不能正常工作？

javascript html angularjs

Javascript 为什么模块不能正常工作？,javascript,html,angularjs,Javascript,Html,Angularjs,我对angular很陌生，我正在努力了解这里发生了什么。我有两个不同的模块defaultValueSelect'用于从水果的选项菜单中进行选择，另一个用于从日历中选择日期。这两个单独工作很好（当我说分开时，我的意思是我完全删除其中一个的html和脚本，让另一个去做）。当我把它们放在一起时，只有一个起作用。请帮忙 <body> <script> angular.module('defaultValueSelect', []) .controller('Exa

我对angular很陌生，我正在努力了解这里发生了什么。我有两个不同的模块defaultValueSelect'用于从水果的选项菜单中进行选择，另一个用于从日历中选择日期。这两个单独工作很好（当我说分开时，我的意思是我完全删除其中一个的html和脚本，让另一个去做）。当我把它们放在一起时，只有一个起作用。请帮忙

<body>
    <script>
    angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function ($scope) {
    $scope.data = {
        availableOptions: [
          { id: '1', name: 'Option A' },
          { id: '2', name: 'Option B' },
          { id: '3', name: 'Option C' }
        ],
        selectedOption: { id: '3', name: 'Option C' } //This sets the default value of the select in the ui
    };
}]);
    angular
.module('firstApplication', ['ngMaterial', 'ngMessages'])
.controller('dateController', dateController);

    function dateController($scope) {
        $scope.myDate = new Date();
        $scope.minDate = new Date(
           $scope.myDate.getFullYear(),
           $scope.myDate.getMonth(),
           $scope.myDate.getDate());
        $scope.maxDate = new Date(
           $scope.myDate.getFullYear(),
           $scope.myDate.getMonth() + 2,
           $scope.myDate.getDate());


    }
    </script>
    <div ng-app="defaultValueSelect" ng-controller="ExampleController">
        <form name="myForm">
            <label for="mySelect">Make a choice:</label>
            <select name="mySelect" id="mySelect"
                    ng-options="option.name for option in data.availableOptions track by option.id"
                    ng-model="data.selectedOption"></select>
        </form>
        <hr>
        <tt>option = {{data.selectedOption}}</tt><br />
    </div>
    <h1>sdfdsaf</h1>
    <div class="row">
        <div class="col-md-4">


        </div>
        <div ng-app="firstApplication">
            <div class="datepickerdemo" ng-controller="dateController as ctrl" ng-cloak>
                <div class="col-md-4">
                    <h4>&nbsp;&nbsp;Select  Date</h4>

                    <md-datepicker ng-model="ctrl.myDate"
                                   md-placeholder="enter date"
                                   md-min-date="minDate"
                                   md-max-date="maxDate">
                    </md-datepicker>
                </div>
            </div>
        </div>
        <div class="col-md-4">
        </div>

    </div>

</body>

</html>


角度。模块（'defaultValueSelect'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.data={
可用选项：[
{id:'1'，name:'Option A'}，
{id:'2'，name:'Option B'}，
{id:'3'，name:'Option C'}
],
selectedOption:{id:'3'，name:'Option C'}//这将设置用户界面中select的默认值
};
}]);
有棱角的
.module（'firstApplication'，['ngMaterial'，'ngMessages']））
.控制器（“日期控制器”，日期控制器）；
函数日期控制器（$scope）{
$scope.myDate=新日期（）；
$scope.minDate=新日期(
$scope.myDate.getFullYear（），
$scope.myDate.getMonth（），
$scope.myDate.getDate（））；
$scope.maxDate=新日期(
$scope.myDate.getFullYear（），
$scope.myDate.getMonth（）+2，
$scope.myDate.getDate（））；
}
作出选择：

option={{data.selectedOption}}

sdfdsaf
选择日期

应用程序中应该有一个主模块，您可以将其他模块插入主模块：

angular.module('defaultValueSelect', ['firstApplication'])

然后在HTML的ng应用程序中只声明主模块

<div ng-app="defaultValueSelect">.....</div>

。。。。。

此外，您可以为不同的代码块声明ng控制器

希望能有帮助

应用程序中应该有一个主模块，您可以将其他模块插入主模块：

angular.module('defaultValueSelect', ['firstApplication'])

然后在HTML的ng应用程序中只声明主模块

<div ng-app="defaultValueSelect">.....</div>

。。。。。

此外，您可以为不同的代码块声明ng控制器

希望能有帮助

代码中不需要两个单独的模块。您的模块可能看起来像

   angular.module('defaultValueSelect', ['ngMaterial', 'ngMessages']).contoller('myCtrl',$scope){

// 
}

在主模块中导入其他模块

代码中不需要两个单独的模块。您的模块可能看起来像

   angular.module('defaultValueSelect', ['ngMaterial', 'ngMessages']).contoller('myCtrl',$scope){

// 
}

在主模块中导入其他模块

是的，其余代码保持不变，两个模块都可以工作！！是的，其余的代码保持不变，您的两个模块都可以工作！！