本实例使用factory配合路由实现最简单的公共页头。
html代码：<div ng-controller="commonHeadCtrl"><div class="title_wrap"><div class="title_l inline-block">div><h1>{{title}}h1><div class="title_r block"><a href="">+a>div>div><hr class="green" />div>
js代码：var commonHead = angular.module('commonHead',[]);commonHead.factory('commonTitleFac',[ function () {var commonTitleFac = {};var headTitle;commonTitleFac.setTitle = function (title) {headTitle = title; };commonTitleFac.getTitle = function () {return headTitle;};return commonTitleFac;}]);commonHead.controller('commonHeadCtrl',['$scope','$state','$http','commonTitleFac',function($scope,$state,$http,commonTitleFac){$scope.$watch(commonTitleFac.getTitle, function (newVal, oldVal, scope) {$scope.title = newVal;});}]);
在主页面上因入此js以及用路由引入公共页头。
html代码：<html lang="en" ng-app="adProgramMage"><head><meta charset="UTF-8"><title>云贴-广告管理title><link href="/css/base.css" type="text/css" rel="stylesheet" /><script src="/js/angular/angular.js" type="text/javascript">script><script src="/js/angular/angular-ui-router.js" type="text/javascript" charset="utf-8">script><script src="/js/commonHead.js" type="text/javascript" charset="utf-8">script><script src="/js/adProgram.js" type="text/javascript" charset="utf-8">script>head><body><div ui-view="commonHead">div><div ui-view="adProgramContent">div><div ui-view="commonFoot">div>body>html>
js代码：'user strict';var condition = "";var getUserAdProgram = "";var adProgramMage = angular.module('adProgramMage',['ui.router','commonHead']);adProgramMage.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){$urlRouterProvider.otherwise(condition);$stateProvider.state('adProgramMage',{url:condition,views:{'adProgramContent':{templateUrl:'/views/adProgramContent.html'},'commonHead' : {templateUrl:'/views/common/commonHead.html'},'commonFoot' : {templateUrl:'/views/common/commonFoot.html'}}});}]);adProgramMage.controller('adProgramCtrl',['$scope','$http','$stateParams','commonTitleFac','$location',function($scope,$http,$stateParams,commonTitleFac,$location){commonTitleFac.setTitle("广告管理");}]);
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
