【AngularJs】factory实现简单的网页公共头部
发布时间:2020-12-17 10:00:32 所属栏目:安全 来源:网络整理
导读:本实例使用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
本实例使用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代码:
<!DOCTYPE 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','$stateParams','$location',$stateParams,commonTitleFac,$location){
commonTitleFac.setTitle("广告管理");
}]); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |