我对使用angularjs指令感到困惑。
指令需要范围@header，所以我写的如下。
但是，我无法在链接函数中从子控制器获取$ scope.text数据。
所以，我删除了
scope : {
navi : '@header'
},
这个来自指令，然后我可以得到$ scope.text数据。
为什么会这样？
about.js it belong to about.html
angular.module('sampleAngularApp')
.controller('AboutCtrl',['$scope', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
var nTxt = $(".location>a:eq(0)").text();
var lTxt = $(".location>strong").text();
console.log(lTxt);
$scope.$emit('text',{
sub : nTxt,
lub : lTxt
});
}]); about.html it involved in ng-view
<div class="content">
<div class="location">
<a href="/business/toastbarAds">About</a> > <a
href="/business/instPopup">설치제휴</a> > <strong>Daum 시작페이지</strong>
</div>
<p>This is the about view.</p>
</div>
app
.directive(
"headerMenu",
function() {
return {
restrict : 'E',
template : '<header class="header"><h1><a href="../prod/funcMain.html"><span class="blind">AhnLab Insight Portal</span></a></h1>'
+ '<nav class="gnb"><ul><li class="ico name">'
+ '<li><a href="#/logout">Logout</a></li>'
+ '<li class="last"><a href="#/help">Help</a></li>'
+ '</ul></nav><nav class="navi">'
+ '<ul><li><a href="#/home">Home</a></li>'
+ '<li><a href="#/about">About</a></li>'
+ '<li><a href="#/business">Business</a></li>'
+ '</ul></nav></header>',
link : function(scope, element, attr) {
scope.$on('text', function(event, data) {
console.log(data);
scope.header = data.sub;
scope.lnb = data.lub;
angular.element(".navi ul li a").each(
function() {
var nTxt = data.sub;
if (nTxt == angular.element(this)
.text()
|| nTxt == '')
angular.element(this).addClass(
"selected");
});
});
}
};
});
app
.directive(
"leftMenu",
function() {
return {
scope : {
navi : '@header'
},
restrict : 'E',
transclude : true,
template : '<a href="#" class="btnFold"><span class="blind">lnb 영역 접기/펴기 토글</span></a> '
+ ' <nav class="lnb"><ul ng-show="navi == \'Home\'"><li>'
+ ' <a href="../prod/funcMain.html">기능사용 분석</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../prod/funcMain.html">메인UI</a></li>'
+'<li>'
+ ' <a href="../prod/pattChk.html">사용패턴 분석</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../prod/pattChk.html">최근검사</a></li>'
+ ' <li><a href="../prod/pattUpda.html">업데이트</a></li>'
+ ' <li><a href="../prod/pattStay.html">체류시간</a></li>'
+ ' <li><a href="../prod/pattMenu.html">시작메뉴</a></li>'
+ ' <li><a href="../prod/pattPage.html">시작페이지 도메인</a></li>'
+ ' </ul></li></ul>'
+ '<ul ng-show="navi == \'About\'" id="customer"><li>'
+ ' <a href="../cust/instDele.html">설치/삭제분석</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/instDele.html">설치/삭제</a></li>'
+ ' </ul></li><li>'
+ ' <a href="../cust/place.html">설치제휴</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/place.html">Daum 시작페이지</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../cust/custType.html">고객상태 분석</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/custType.html">고객상태별</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../cust/b2bType.html">신규고객 분석(B2B)</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/b2bType.html">업종별</a></li>'
+ ' <li><a href="../cust/b2bUser.html">유저구간별</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../cust/prodOver.html">자사중복사용분석</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/prodOver.html">중복사용현황</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../cust/searchNum.html">고객 상세조회</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../cust/searchNum.html">제품번호 조회</a></li>'
+ ' <li><a href="../cust/searchVer.html">제품버전 조회</a></li>'
+ ' <li><a href="../cust/searchUser.html">고객현황 조회</a></li>'
+ ' </ul>'
+ '</li></ul>'
+ '<ul ng-show="navi == \'Business\'" id="business">'
+ '<li>'
+ ' <a href="../busi/bnToast.html">광고제휴</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../busi/bnToast.html">토스트바배너</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../busi/instPage.html">설치제휴</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../busi/instPage.html">Daum 시작페이지</a></li>'
+ ' </ul>'
+ '</li>'
+ '<li>'
+ ' <a href="../busi/servPcReco.html">서비스제휴</a>'
+ ' <ul class="sub">'
+ ' <li><a href="../busi/servPcReco.html">PC복구</a></li>'
+ ' <li><a href="../busi/servV365.html">V3 365서비스</a></li>'
+ ' </ul>' + '</li></ul></nav>',
link : function(scope, element, attribute) {
// It doesn't work!!
scope.$on('text', function(event, data){
scope.navi = data.sub;
var lTxt= data.lub;
angular.element(".lnb .sub li a").each(function() {
if (lTxt == angular.element(this).text() || lTxt == '')
angular.element(this).parents('li').addClass("selected");
});
});
}); <div class="col-md-12">
<header-menu></header-menu>
<div class="container">
<left-menu header={{header}}></left-menu>
<div ng-view></div>
</div>
</div>