javascript - 为什么模块无法正常工作?

标签 javascript html angularjs

我对 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>

最佳答案

您的应用程序中应该有一个主模块,您可以将其他模块注入(inject)到主模块中:

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

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

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

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

希望对你有帮助!!

关于javascript - 为什么模块无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44705606/

相关文章:

javascript - 将身份验证方案与 Azure AD 相结合

javascript - 我可以单击一个按钮并使用另一个按钮的操作吗?

html - 多个CSS广播节目隐藏在同一个页面上

javascript - 错误 : JSON Parse error: Property name must be a string literal when using angular translate

angularjs - 在 md-list-item 中使用 ng-click 处理多个元素

javascript - Google Analytics 事件跟踪 "labels"未记录

html - 需要帮助找到哪个 div element.style 归因于

html - 非样式化 HTML 元素是否会在文档流中产生任何类型的问题或任何跨浏览器问题?

javascript - angular.js "Hello World"应用程序无法正常工作

javascript - Google IMA SDK 的 HTML 5 问题