为什么Angularjs会两次调用控制器?

时间:2017-01-05 14:33:39

标签: javascript asp.net angularjs

这是我的控制者:

queueApp.controller('userController', function ($scope, $routeParams, $interval, userService) {
    console.log("<In userController>");
});

应用:

var queueApp = angular.module('queueApp', ['ngRoute']);
queueApp.config(function ($routeProvider) {
    $routeProvider.when('/Doctor/:id*',
        {
            title: 'Doctors',
            controller: 'userController',
            templateUrl: '/Scripts/User/Index.html'
        });
});

_Layout页面中有对这些文件的引用(在我的ASP.NET MVC应用程序中) 我已将ng-view属性添加到_Layout页面中的body元素,将ng-app="queueApp"标记添加到html元素。我得到了这条线 "<In userController>"打印两次,在控制器中调用web api服务时效率很低?!

更新: 脚本/用户/ Index.html的HTML:

<div class="row text-center no-margin"> <!--here the ng-controller will be injected-->
    <div class="col-md-4 bg-default">
        <div class="home-box opening-hours clearfix" style="background-color:white;">
            <h2>text</h2>
            <div>
                <img src="/Content/images/divider-1.png">
            </div>
            <div style="margin-top: -16px;margin-bottom: 20px;">
                <h2>text</h2>
            </div>
            <h3 style="margin-top: -35px;">
                {{clinicId}}
            </h3>
            <div style="margin-top: -41px;">
                <span style="font-family: 'AraHamah1964B-Bold';    font-size: 37px;">text</span>
            </div>
            <div style="margin-top: 5px;">
                <img src="/Content/images/divider-1.png">
            </div>
            <div style="margin-top: -7px;">
                <span style="font-family: 'AraHamah1964B-Bold';     font-size: 63px;
">text</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="home-box opening-hours clearfix" style="background-color: #ffffff;">
            <h4>{{physicianName}}</h4>
            <div>
                <img src="/Content/images/divider-1.png">
            </div>
            <h4 style="color:#6c6c6c; font-size: 27px;margin-top: -6px;">{{clinicName}} <br><span style="font-size: 20px;"> {{speciality}}</span></h4>
            <div>
                <div class="doctors-img">
                    <img src="../../Content/images/Awni.jpg" width="145" style="margin-bottom: 23px;" alt="" title="">
                </div>
            </div>
            <div style="margin-top: -18px;">
                <span style="font-family: 'AraHamah1964B-Bold';font-size: 41px;">text</span>
            </div>
            <div style="margin-top: 4px;">
                <img src="/Content/images/divider-1.png">
            </div>
            <div style="margin-top: 16px;">
                <span style="font-family: 'AraHamah1964B-Bold';font-size: 35px;">{{clinicName}}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4 bg-default">
        <div class="home-box" style="background-color:white;min-height: 491px;">
            <h4>text </h4>
            <div>
                <img src="/Content/images/divider-1.png">
            </div>
            <h2 style="margin-top: -7px;">text</h2>
            <h3 style="margin-top: -22px;">{{next}}</h3>

            <div style="margin-top: -26px;">
                <h4>text </h4>
                <div>
                    <img src="/Content/images/divider-1.png">
                </div>
                <h5 style="margin-top: 1px;">
                    {{current}} <span style="font-size: 15px;float: right;margin-top: 46px;">08:00 PM <br>15 Dec 2016 </span>
                </h5>
            </div>
        </div>
    </div>
</div>


<!-- Sub Page Content
============================================= -->
<div id="sub-page-content" class="clearfix">

    <!-- Our Doctors List
    ============================================= -->

    <div class="colourfull-row" style="margin-top: -50px;"></div>

    <!-- Footer
    ============================================= -->
    <footer id="footer" class="light" style="background-color: #4c4c4c;margin-top: 0px;">
        <!-- Footer Bottom
        ============================================= -->
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <a href="#">
                        <img src="/Content/images/logo.png" style="width: 93px; margin-top: -3px;" alt="" title="Medicom Logo">
                    </a>
                </div>
                <div class="col-md-10">
                    <p class="footer-bottom-text" style="margin-left: -57px;">text <img src="/Content/images/24-7-white.png" style="width: 35px;"> | text </p>
                </div>
            </div>
        </div>
    </footer>
</div><!--end #wrapper-->

_layout:

<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="queueApp">
<head>
    <base href="" />
    <!-- Basic Page Needs

     ================================================== -->
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="icon" type="image/png" href="~/Content/images/favicon.png">

    <title>Porto Medical Center</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

    <meta name="author" content="">


</head>
<body class="fixed-header" style="overflow-x:hidden;" ng-view autoscroll="true">
<div id="wrapper" class="clearfix">
        @RenderBody()    
        <!-- Sub Page Content
    ============================================= -->
    </div>
        <script src="~/Scripts/_queueApp.js"></script>
    <script src="~/Scripts/User/userController.js"></script>
    <script src="~/Scripts/User/userService.js"></script>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

只需改变一下:

queueApp.controller('userController', function ($scope, $routeParams, $interval, userService) {
    console.log("<In userController>");
});

到此:

function userController($scope, $routeParams, $interval, userService) {
    console.log("<In userController>");
});

这可能会解决您的问题。

答案 1 :(得分:0)

我的问题真的很难找到。最后,当网页缺少图像时,就会出现问题。 src缺少网址。这是在MVC 5 Web控制器上发生的。为了解决这个问题,当没有可用的真实图像时,我添加了透明图像。

<img alt="" class="logo" src="">