加载视图时运行AngularJS控制器
我有一个angularJS单页面应用程序，可以加载每次点击的视图。
我的登录名和索引是一个html。我通过ng-show和ng-if
来操纵它流程如下： Index.html和IndexController.js： 登录页面有一个ng-show =＆＃34;！isLogin＆＃34;然后，如果它被验证，那么isLogin = true;
所以我将能够看到我的主页。代码就像这样
<section id="content">
<div ng-view>
</div>
</section>
然后我有一个default.html，其中包含＆＃39; isLogin＆＃39;之后要看的第一页。变为true，具有控制器DashboardController.js
但事情是控制器不会运行，除非我点击导航
上的按钮 
参见＆＃34;逾期票据＆＃34;。它没有加载，除非我点击＆＃34;仪表板＆＃34;在我的导航栏上
那么登录后如何运行我的控制器？任何帮助将不胜感激 该项目用于教育目的
谢谢
编辑： DashboardController.js
var dashboardController = angular.module('DashboardController', []).controller('DashboardController', function ($http, $scope, $sessionStorage,$window,SweetAlert,BillService,$filter) {
(function init() {
$(document).ready(function() {
$('select').material_select();
$('.modal-trigger').leanModal();
$('.modal').modal();
});
$scope.overDue = [];
BillService.getBillbyBusinessId($sessionStorage.currentBusiness.businessId).then(function (response) {
angular.forEach(response.data, function (value) {
if (value.status === "active") {
var date = new Date();
date = $filter('date')(date, "MM-dd-yyyy");
if(value.dueDate < date){
$scope.overDue.push(value);
}
}
});
});
var obj=[];
for(var i=1;i<5;i++){
obj.push({Id: i, Value: "Value "+i});
}
$scope.ItemList=obj;
})();
//
//$scope.showCreateForm = function(){
// $('#modal1').show();
//}
});
dashboardController.directive("select2", function ($timeout, $parse) {
return {
restrict: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
的index.html
</head>
<body class="cyan">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div id="login" ng-show="!isLogin">
<div class="login">
<div id="login-page" class="row">
<div class="col s12 z-depth-4 card-panel" style="padding-bottom: 10px ">
<form class="login-form" ng-submit="login()" ng-show="!businessPicker">
<div class="row">
<div class="input-field col s12 center">
<img src="images/codegum_logo.png" alt=""
class="circle responsive-img valign profile-image-login">
<p class="center login-form-text">Codegum Inc.</p>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-social-person-outline prefix"></i>
<input id="username" type="text" ng-model="username">
<label for="username" class="center-align">Username</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password" ng-model="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m12 l12 login-text">
<input type="checkbox" id="remember-me"/>
<label for="remember-me">Remember me</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 l6">
<p class="margin medium-small"><a href="/registration">Register Now!</a></p>
</div>
<div class="input-field col s6 m6 l6">
<p class="margin right-align medium-small"><a href="/login">Forgot
password ?</a></p>
</div>
</div>
</form>
<div id="chooseBusiness" ng-show="businessPicker">
<h5 style="text-align:center;margin-bottom:15px; font-size: 20px;">Choose Business</h5>
<ul dir-paginate="item in businessRole | itemsPerPage: 5" id="profile-page-about-details" class="collection z-depth-1" style="margin-bottom:0px !important; margin-top: 0px !important;">
<li class="collection-item">
<div class="row" style="margin-bottom:0px !important; margin-top: 0px !important; " ng-click="chosenBusiness(item.business)">
<div class="col s5 grey-text darken-1"><i style="font-size:20px;" class="mdi-action-wallet-travel"></i></div>
<div class="col s7 grey-text text-darken-4 text-left">{{item.businessName}}</div>
</div>
</li>
</ul>
<dir-pagination-controls class="center"></dir-pagination-controls>
<a class="btn waves-effect waves-light " type="submit" name="action" style="margin-bottom: 10px; margin-top:10px; margin-right:55px; margin-left:55px;" ng-click="businessReg()">Create a Business</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-show="createBusiness">
<div class="col s8 offset-s2">
<div id="breadcrumbs-wrapper">
<div class="col s12">
<h5 class="breadcrumbs-title">Create Business</h5>
<ol class="breadcrumbs">
<li><a>Select Business</a></li>
<li class="active">Create Business</li>
</ol>
<div class="divider"></div>
</div>
</div>
<div class="card-panel">
<div class="row">
<div class="input-field col s12">
<input id="companyName" type="text" class="validate" ng-model="companyName"
ng-class="{invalid : validation.companyName}">
<label for="companyName" ng-class="{invalid : validation.companyName}"
data-error="Business/Company Name is required">Business/Company Name</label>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="input-field col s12">
<select id="businessType" ng-model="typeBusiness" ng-class="{invalid : validation.businessType}">
<option value="" disabled selected>Choose your option</option>
<option value="Artist, Photographers & Creative Types">Artist, Photographers & Creative Types</option>
<option value="Consultant and Professionals">Consultant and Professionals</option>
<option value="Financial Services">Financial Services</option>
<option value="General: I make or sell a PRODUCT">General: I make or sell a PRODUCT</option>
<option value="General: I provide a SERVICE">General: I provide a SERVICE</option>
<option value="Hair, Spa & Aesthetics">Hair, Spa & Aesthetics</option>
<option value="Medical, Dental, Health">Medical, Dental, Health</option>
<option value="Non-profits, Association & Groups">Non-profits, Association & Groups</option>
<option value="Real Estate, Construction & Home Improvement">Real Estate, Construction & Home Improvement</option>
<option value="Retailers, Resellers & Sales">Retailers, Resellers & Sales</option>
<option value="Web, Tech & Media">Web, Tech & Media</option>
</select>
<label for="businessType" ng-class="{invalid : validation.businessType}"
data-error="Business Type is required">Business Type</label>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="input-field col s12">
<select id="currency" ng-model="businessCurrency" ng-class="{invalid : validation.currency}">
<option value="" disabled selected>Choose your option</option>
<option value="PHP - Philippine Peso">PHP - Philippine Peso</option>
</select>
<label for="currency" ng-class="{invalid : validation.currency}"
data-error="Business Currency is required">Business Currency</label>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="input-field col s12">
<select id="country" type="text" class="validate" ng-model="country"
ng-class="{invalid : validation.country}">
<option value="" disabled selected>Choose your option</option>
<option value="Philippines">Philippines</option>
</select>
<label for="country" ng-class="{invalid : validation.country}"
data-error="Country is required">Country</label>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col s4 offset-s4">
<a class="btn waves-effect waves-light blue" ng-click="makeBusiness()">Create</a>
<a class="btn waves-effect waves-light blue" ng-click="cancelRequest()">Cancel </a>
</div>
</div>
</div>
<!--card panel-->
</div>
<!--col s8-->
</div>
<div id="index" ng-show="showWeb">
<!-- START HEADER -->
<header id="header" class="page-topbar">
<!-- start header nav-->
<div class="navbar-fixed">
<nav class="navbar-color">
<div class="nav-wrapper">
<ul class="left">
<li><h1 class="logo-wrapper"><a href="#" class="brand-logo darken-1"><img
src="images/materialize-logo.png" alt="materialize logo"></a> <span class="logo-text">Materialize</span>
</h1></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="javascript:void(0);"
class="waves-effect waves-block waves-light notification-button"
data-activates="notifications-dropdown"><i class="mdi-social-notifications">
<small class="notification-badge">5</small>
</i>
</a>
</li>
</ul>
<!-- notifications-dropdown -->
<ul id="notifications-dropdown" class="dropdown-content">
<li>
<h5>NOTIFICATIONS <span class="new badge">5</span></h5>
</li>
<li class="divider"></li>
<li>
<a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
</li>
<li>
<a href="#!"><i class="mdi-action-stars"></i> Completed the task</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
</li>
<li>
<a href="#!"><i class="mdi-action-settings"></i> Settings updated</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
</li>
<li>
<a href="#!"><i class="mdi-editor-insert-invitation"></i> Director meeting started</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
</li>
<li>
<a href="#!"><i class="mdi-action-trending-up"></i> Generate monthly report</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
</li>
</ul>
</div>
</nav>
</div>
<!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="dash"></div>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<!-- START LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<li class="user-details cyan darken-2">
<div class="row">
<div class="col col s4 m4 l4">
<img src="images/avatar.jpg" alt="" class="circle responsive-img align profile-image">
</div>
<div class="col col s8 m8 l8">
<ul id="profile-dropdown" class="dropdown-content">
<li><a href="#!AccountProfile"><i class="mdi-action-face-unlock"></i> Profile</a>
</li>
<li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
</li>
<li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
</li>
<li><a ng-click="logout()"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
</li>
</ul>
<a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn"
href="#" data-activates="profile-dropdown">Hey, {{user.firstName}}<i
class="mdi-navigation-arrow-drop-down right"></i></a>
<p class="user-roal">{{businessData.companyName}}</p>
<p class="user-roal" style="line-height:5px;">{{businessRole.roles}}</p>
</div>
</div>
</li>
<li class="bold active"><a href="#" class="waves-effect waves-cyan"><i
class="mdi-action-dashboard"></i> Dashboard</a>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i
class="mdi-editor-attach-money"></i>Sales</a>
<div class="collapsible-body">
<ul>
<li><a href="#!Customers">Customer</a></li>
<li><a href="#!SalesPNS">Products and Services</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i
class="mdi-action-shopping-cart"></i>Purchases</a>
<div class="collapsible-body">
<ul>
<li><a href="#!Bills">Bills</a></li>
<li><a href="#!Vendors">Vendors</a></li>
<li><a href="#!PurchasesPNS">Products and Services</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i
class="mdi-action-account-balance"></i>Accounting</a>
<div class="collapsible-body">
<ul>
<li><a href="#!Transactions">Transactions</a></li>
<li><a href="#!Starting">Chart of Accounts</a></li>
</ul>
</div>
</li>
<li ng-if="businessRole.roles == 'Owner'||businessRole.roles == 'Manager'" class="bold"><a href="#!Reports" class="waves-effect waves-cyan"><i
class="mdi-content-report"></i>Reports</a>
</li>
<li ng-if="businessRole.roles == 'Owner'||businessRole.roles == 'Manager'" class="bold"><a href="#!Logs" class="waves-effect waves-cyan"><i
class="mdi-av-my-library-books"></i>Logs</a>
</li>
<li ng-if="businessRole.roles == 'Owner'||businessRole.roles == 'Manager'" class="bold"><a href="#!Reference" class="waves-effect waves-cyan"><i
class="mdi-action-settings"></i>Reference</a>
</li>
</ul>
<a href="#" data-activates="slide-out"
class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i
class="mdi-navigation-menu"></i></a>
</li>
</ul>
<a href="#" data-activates="slide-out"
class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i
class="mdi-navigation-menu"></i></a>
</aside>
<!-- END LEFT SIDEBAR NAV-->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- END LEFT SIDEBAR NAV-->
<section id="content">
<div ng-view>
</div>
</section>
</div>
</div>
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer" ng-show="isLogin">
<div class="footer-copyright">
<div class="container">
Copyright © 2018 <a class="grey-text text-lighten-4"
href="http://codegum.ph/"
target="_blank">Codegum
Inc.</a> All rights reserved.
<span class="right"> Design and Developed by <a class="grey-text text-lighten-4"
href="http://facebook.com/xreign09">Team 1-UP</a></span>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
</body>
</html>
EDIT2：对于NTP
<body ng-init="change=true">
<button ng-click="change = !change">Click to initialize other controller</button>
<div ng-if="change" ng-controller="MainCtrl">
first controller
<div ng-if="!change" ng-controller="SubCtrl">
second controller
</div>
</div>
</body>
2 个答案:
答案 0 :(得分：0)
您可以尝试以下操作，因为当isLogin为true时，ngIf指令会重新创建仪表板部分，因此当isLogin为true时，仪表板控制器将运行。
<div id="dashboard" ng-if="isLogin" ng-controller="DashboardController">
</div>
答案 1 :(得分：0)
每个视图都有一个通过路由器或通过绑定的控制器 NG-控制器。只要该视图出现在dom中，就会调用相关的控制器。
<div ng-controller="DashboardController" >
</div>
由于您正在使用ngrouter，在这种情况下，在您的default.html中添加一行ng-controller在顶部或路由器添加控制器。因此，只要您登录并将路径更改为仪表板，控制器就会被调用
避免使用
ng-if="isLogin"
因为如果非登录用户尝试打开它，它将显示空白页面。相反，添加一个公共服务进行登录并在控制器中调用，如果用户未登录，则重新路由回登录。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？