Question

我对角度很新，我想了解这里发生了什么。我有两个不同的模块。＆＃39; defaultValueSelect＆＃39;用于从水果的选项菜单中选择，另一个用于从日历中选择日期。这两个工作分别很好（当我单独说，我的意思是我完全删除一个的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>

Answer 1

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

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

然后在ng-app中的HTML中仅声明主模块

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

您还可以为不同的代码块声明ng-controller。

希望它会有所帮助!!

Answer 2

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

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

// 
}

导入主模块中的其他模块

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

2 个答案: