angular 1.3 指令里面link监听独立作用域里面变化失效
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Basic Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.2.30/angular.min.js"></script>
</head>
<body>
<h2>Basic Panel</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The panel is a container for other components or elements.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
</div>
<div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
</body>
<div ng-controller="panelcontroller">
<div easy-panel config="config" status="status" style="padding: 10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<a class="easyui-linkbutton" ng-click="close()">close</a>
</div>
</html>
<script>
angular.module('app',['easyui-panel'])
.controller('panelcontroller',function($scope,$element){
$scope.config = {
width:'500',
height:'200',
title:'ng-ui-panel',
id:'ng-ui-panel',
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
};
$scope.close = function (){
$scope.$broadcast('closetoggle')
}
})
angular.module('easyui-panel',[])
.directive('easyPanel',function(){
// Runs during compile
return {
scope: {
config:'=',
},
controller: function($scope, $element, $attrs, $transclude) {
// 设定panel配置
$scope.defaultconfig = {
onOpen:function(){
$scope.status.closed = false;
},
onClose:function(){
$scope.status.closed = true;
},
onDestroy:function(){
$scope.status.destory = true;
},
onCollapse:function(){
$scope.status.open = false;
},
onExpand:function(){
$scope.status.open = true;
},
onMaximize:function(){
$scope.status.minimized = false;
},
onMinimize:function(){
$scope.status.minimized = true;
}
};
// 新panel配置
$scope.newconfig = angular.extend($scope.defaultconfig,$scope.config)
// 独立作用域下,设定展开状态
$scope.status = {
minimized:false,
closed:false,
destory:false,
open:true
};
// 监听父级,传递下来的事件
$scope.$on('minimiztoggle',function(event,data){
$scope.status.minimized = !$scope.status.minimized;
});
$scope.$on('closetoggle',function(event,data){
$scope.status.closed = !$scope.status.closed;
});
$scope.$on('destory',function(event,data){
$scope.status.destory = !$scope.status.destory
});
$scope.$on('opentoggle',function(event,data){
$scope.status.open = !$scope.status.open
});
},
restrict: 'A',
link: function($scope, iElm, iAttrs, controller) {
iElm.panel($scope.newconfig);
// 监听作用域下status变化
// 这里逗逼了，$watch监听的是对象名称，字符串！
$scope.$watch('status',function(obj){
console.log(obj);
for(item in obj){
if(item == 'minimized'){
$scope.status.item ? iElm.panel('minimize'):iElm.panel('maximize');
$scope.$emit('minimized',$scope.status.minimized);
}
if(item == 'closed'){
$scope.status.item ? iElm.panel('close'):iElm.panel('open');
$scope.$emit('closed',$scope.status.closed);
}
if(item == 'destory'){
$scope.status.item ? iElm.panel('destroy'):iElm.panel('destroy');
$scope.$emit('destory',$scope.status.destory);
}
if(item == 'open'){
$scope.status.item ? iElm.panel('expand'):iElm.panel('collapse');
$scope.$emit('open',$scope.status.open);
}
}
},true);
}
};
})
</script>console.log(obj); 返回undefined;
是不是link里面$watch只能监听attrs里面的值？
突然想到个问题，我定义了scope.status 但这个属性没在页面中有具体的体现，angular是不是就不会建立$watch，也不会进入$digest循环中了，希望有大神能解答下
问题解决了，$watch下要传入的是字符串或者是函数，我传递成对象了
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论