指定&和@的页面统一显示的指令

alices_lin

于 2017-03-22 14:17:24 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

文章标签：指令 angular指令

本文链接：https://blog.youkuaiyun.com/alices_lin/article/details/64906922

本文介绍了一个使用Angular自定义指令的实例，展示了如何通过模块指令显示无数据提示视图，并结合具体HTML模板与JS文件说明了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

modules指令文件

angular.module('app').directive('noDataView',[function(){
	return {
		templateUrl:'tpl/no_data_view.html',
		restrict : 'E',
		scope : {
			moduleItemName : '@',	//传递字符串
			method : '&'		//传递方法
		}
	}
}]);

no_data_view.html文件

<div class="text-center" style="margin: 20%;">
    <div>
        <img src="/img/empty.png" alt="暂无数据">
    </div>
    <br>
    <p>
        尚未创建{{moduleItemName}}，<a style="color: #2987e6;" href="#" ng-click="method()">前去创建</a>
    </p>
    <p>
        <yzz-btn btn-style="default" ng-click="method()"
                 btn-content="点此创建{{moduleItemName}}"></yzz-btn>
    </p>
</div>

请求的页面，cash_type.html

<no-data-view method="addCashTypeModalShow()" module-item-name="押金类型"></no-data-view>

addCashTypeModalShow（）是请求页面对应的js文件
cashType.js文件
$scope.addCashTypeModalShow = function(){}
页面效果