Angularjs的两个ng控制器可以解决HTML标记中的冲突
angularjs two ng controllers with resolve conflict in html markup
config.router.js
app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'JS_REQUIRES',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, jsRequires) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;
// LAZY MODULES
$ocLazyLoadProvider.config({
debug: false,
events: true,
modules: jsRequires.modules
});
// APPLICATION ROUTES
// -----------------------------------
$urlRouterProvider.otherwise('/login/signin');
//
// Set up the states
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
resolve: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl'),
abstract: true
}).state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/dashboard.html",
resolve: loadSequence('jquery-sparkline', 'dashboardCtrl'),
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'
}
})
...
loginCtrl.js
app.controller('LoginCtrl', ["$scope", "alert", "auth", "$state", "$auth", "$timeout", function ($scope, alert, auth, $state, $auth, $timeout) {
$scope.submit = function () {
$auth.login({
email: $scope.email,
password: $scope.password
})
.then(function(res) {
var message = 'Thanks for coming back ' + res.data.user.email + '!';
if (!res.data.user.active)
{$auth.logout();
message = 'Just a reminder, please activate your account soon :)';}
alert('success', 'Welcome', message);
return null;
})
.then(function() {
$timeout(function() {
$state.go('main');
});
})
.catch(handleError);
} // submit function for login view
function handleError(err) {
alert('warning', 'oops there is a problem!', err.message);
}
}]);
main.js
var app = angular.module('myApp', ['my-app']);
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
// Attach Fastclick for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers
FastClick.attach(document.body);
// Set some reference to access them from any scope
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
// GLOBAL APP SCOPE
// set below basic information
$rootScope.app = {
name: 'My App',
author: 'example author',
description: 'My Platform',
version: '1.0',
year: ((new Date()).getFullYear()),
isMobile: (function () {
var check = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
check = true;
};
return check;
})()
};
$rootScope.user = {
name: 'Peter',
job: 'ng-Dev'
};
}]);
问题是当我将ng-controller="loginCtrl"
添加到我的登录div上的html文件进行登录时,它可以工作。但是我在logindiv下面有另一个div:
<div class="copyright" >
{{app.year}} © {{ app.name }} by {{ app.author }}.
</div>
这行不通!但是,我在logindiv上面有一个类似的,它可以工作:
<div class="logo">
<img ng-src="{{app.layout.logo}}" alt="{{app.name}}"/>
</div>
问题在哪里?如何解决这个问题?由于
如果你使用的是角ui-router
,没有必要手动添加ng-controller="loginCtrl"
到你的div,而不是添加controller
属性在你的$stateProvider.state
的例子:
.state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/dashboard.html",
title: 'Dashboard',
controller: 'dashboardCtrl',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('path/to/your/controller.js');
}]
},
ncyBreadcrumb: {
label: 'Dashboard'
}
})
当你改变状态时视图通常会变成,这就是重点,对吧?动态设置控制器可能不会像您期望的那样工作。
签出文档
相关文章:
- 如何逃离<脚本>jquery html()中的标记.我使用了innerHTML和outerHTML来解决这个
- 更好的解决方案HTML元素幻灯片从右侧CSS转换
- JavaScript/HTML 错误的解决方案
- HTML”;文件“/OpenFile对话框解决方法
- "捆绑;仅适用于HTML/JS的解决方案
- 使用html表单作为python脚本输入的简单解决方案
- Asp NET在不同的解决方案中共享了html组件
- Jquery/Javascript 解决方案,用于将 wiki 文本转换为 HTML,反之亦然
- 在 html 模板中找不到错误.在非法令牌中解决)
- 如何解决“资源解释为脚本但使用 MIME 类型文本/html 传输”
- Java 脚本不适用于外部工作表,但它适用于主 html 文件.为什么会这样,我该如何解决
- 角度:解决 html 依赖性
- 需要解决方案在 NicEdit 将 HTML 文本插入实例
- I'm正在为客户端上的常见HTML联系人表单寻找替代解决方案's侧
- 需要Html超时解决方法
- 无法解决index.html中的错误
- 需要一个更好的解决方案来从JavaScript文件附加HTML
- Jinja2没有在javascript/html中呈现引号或amp;安全过滤器未解决
- 如何解决解析HTML时的错误
- HTML电子邮件模板解决方案到表TD中的javascript链接