一、写一个directive
module.directive('shopListView, function () {
return {
restrict: 'E',
templateUrl: "/xxx/shopListTemplate.html",
scope: {
shopList: '=',
showDetail : '&'
},
link: function (scope, element, attrs) {
scope.changeItemSelected = function (item) {
item.selected = !item.selected;
}
}
};
});
注意以下几点
1：名称
shopListView，在html中引用时，名称对应shop-list-view
2：其scope是独立，打破了从scope的继承链。其内有属性为
shopList，“=”表示该属性值与父scope中的同名属性双向绑定。在html中引用时，属性写做shop-list
3：
showDetail ，“&”表示其可以调用父scope中的方法，同样在html引用时，属性对应show-detail
二、shopListTemplate.html的定义
<div ng-repeat="shop in shopList" class="product-item" ng-class="{'selected': shop.selected}">
<div class="ibox-content product-box" ng-click="changeItemSelected(shop)">
<span>店铺ID:{{shop.seller_id}}</span>
<button type="button" class='btn btn-xs btn-primary' ng-click="showDetail({key:shop})">详情</button>
</div>
</div>
</div>
注意以下几点
1：shop in
shopList，shopList对应该directive中的scope下的同名属性
2：ng-click="
changeItemSelected(shop)"，对应directive中的同名方法
3：ng-click="
showDetail({key:shop})"中，showDetail对应scope下的同名方法，传参为一个map对象，键为‘
key‘字符串，值为’shop‘对象。通过这样的方式，其效果就是能够将directive中独立scope中的对象，通过函数调用，传递到父controller中
三、在html中使用
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body>
<div ng-controller="shopCtrl">
<shop-list-view shop-list="dataList" show-detail="showDetail(key)"> </shop-list-view>
</div>
<script src="/angular.min.js"></script>
...
</body>
注意以下几点
1：shop-list-view 名称
2：shop-list 属性
3：show-detail="showDetail(key)，show-detail对应scope中的showDetail方法，且该方法要由父scope提供（也就是
shopCtrl提供），key为map对应中的键，参考二.3
四、定义controller
angular.module("app", [])
.controller('shopCtrl', function ($scope) {
$scope.dataList=[{''seller_id':'xx'}];
$scope.showDetail = function (param) {
$scope._showModel(
...);
}
});
注意以下几点
1：showDetail = function (param) ，参数命名’param‘，无所谓
参考链接
http://www.w3ctech.com/topic/1612
http://hudeyong926.iteye.com/blog/2072204
分享到：
相关推荐
最终，通过在AngularJS模块中注册我们的Directive，我们就可以在HTML模板中使用这个自定义的标签来展示我们的表格了。 文章中的代码片段存在一些OCR扫描错误，如“table+=tableStart;”和“table+=tableEnd;”等，...
就我对directive的粗浅理解，它一般用于独立Dom元素的封装，应用场合为控件重用和逻辑模块分离。后者我暂时没接触，但数据交互部分却是一样的。所以举几个前者的例子，以备以后忘记。 directive本身的作用域$scope...
总结，AngularJS自定义指令为我们提供了一种灵活的方式，通过结合正则表达式，可以在前端实现高效的数据校验，提高用户体验并减少服务器端的负担。通过以上示例，你可以了解到如何创建和使用自定义指令进行HTTP地址...
1. **AngularJS自定义指令**： AngularJS的自定义指令允许开发者扩展HTML的功能，创建可重用的组件。它们可以绑定到DOM元素上，添加新的行为或改变元素的外观。自定义指令的定义通常包括`restrict`、`scope`、`link...
总之，AngularJS自定义指令为我们提供了强大的能力，用于创建复杂的表单校验逻辑。通过结合正则表达式，我们可以轻松地实现http链接、纯数字等格式的验证，提升应用的用户体验。在实际项目中，可以根据需求不断扩展...
自定义指令是AngularJS中非常强大和灵活的一个特性，它允许开发者封装和复用界面行为。接下来，我们将详细解释自定义指令...希望本文的内容能帮助你更好地理解和使用AngularJS自定义指令，从而提高开发效率和应用质量。
在本文中，我们将深入探讨如何在 AngularJS 中创建自定义指令来封装 ECharts 2 的柱状图。ECharts 是一个基于 JavaScript 的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。AngularJS 是一个...
AngularJS自定义指令的创建通常通过定义一个模块，并在该模块中使用`.directive()`方法注册一个指令。`restrict`属性用来定义指令的使用方式，它可以是元素、属性、类或注释。`require`属性用来定义指令依赖的其他...
总的来说，这个示例展示了如何使用AngularJS的`directive`来解决实际项目中的问题，即在移动设备上创建一个自定义的、适应性的软键盘，以优化用户体验。通过这种方式，我们可以根据项目的具体需求定制键盘的外观和...
它提供了丰富的功能，包括数据绑定、依赖注入、指令等，而"angularjs-router-directive"则聚焦于AngularJS中的路由和指令两个核心概念。 路由在AngularJS中是通过`ngRoute`模块实现的，它允许我们在应用中定义多个...
在本文中，我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件，该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架，它提供了强大的数据绑定和依赖注入机制，使得构建动态Web...
总结来说，这个案例展示了AngularJS自定义指令如何与第三方库（如ECharts）结合，以提高代码的可复用性和可维护性。在实际开发中，可以根据需求进一步扩展这个指令，例如增加更多配置选项、支持动态加载数据等功能。
创建自定义指令通常涉及到`angular.module().directive()`方法。在提供的代码片段中，我们看到一个名为`uiDirective`的示例指令： ```javascript angular.module('yelloxingApp', []).directive('uiDirective', ...
"angularjs指令 下拉框"这个主题聚焦于如何利用AngularJS创建一个自定义的下拉框（Dropdown）指令。下拉框在Web开发中非常常见，常用于选项选择或者导航菜单。 首先，我们需要理解AngularJS中的指令是如何工作的。...
在本文中，我们将深入探讨AngularJS自定义指令的创建、使用以及内嵌使用。 首先，创建自定义指令需要通过`angular.module().directive()`方法。假设我们已经创建了一个名为`myApp`的模块，我们可以这样定义一个...
本文将详细介绍如何在AngularJS中自定义`img`的`ng-load`事件。 AngularJS的指令系统允许开发者扩展HTML的功能，创建新的DOM事件处理机制。要自定义`ng-load`事件，我们可以创建一个名为`imageonload`的指令。首先...