小程序解决方法_详解angular 中的自界说指令之详解API

  • 栏目:公司新闻 时间:2021-01-11 16:57 分享新闻到:
<返回列表

详解angular 中的自定义指令之详解API       本篇文章主要介绍了angular 中的自定义指令之详解API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

说明: 此处,myCtrl 中定义的 $scope.customer 属性和属性值都在指令中的模板使用了。同样的,在指令return 对象中的 template 也可被替换成一路径,在路径html中书写和template中同样的代码,使用这种方式,可以操作更多代码。

templateUrl 函数式编程

html结构:

 div ng-controller="myCtrl" 
 div my-customer /div 
 /div 

javascript结构:

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.customer = {
 name: 'Naomi',
 address: '1600 Amphitheatre'
 .directive('myCustomer', function() {
 return {
 templateUrl: function(elem, attr) {
 ';
 });

不同的templateUrl ①

 Name: {{customer.name}}

不同的templateUrl ②

 Address: {{customer.address}}

输出结果:

Name: Naomi
Address: 1600 Amphitheatre

说明: templateUrl 的值可以是一个函数返回值,返回用于指令中的html模板的url。

隔离指令的作用域

① 通过不同的controller

html结构:

 div ng-app="myApp" 
 div ng-controller="myCtrl1" 
 my-customer /my-customer 
 /div 
 div ng-controller="myCtrl2" 
 my-customer /my-customer 
 /div 
 /div 

javascript结构:

angular.module('myApp', [])
 .controller('myCtrl1', ['$scope', function($scope) {
 $scope.customer = {
 name: 'Naomi',
 address: '1600 Amphitheatre'
 .controller('myCtrl2', ['$scope', function($scope) {
 $scope.customer = {
 name: 'Igor',
 address: '123 Somewhere'
 .directive('myCustomer', function() {
 return {
 restrict: 'E',
 '

templateUrl html 结构:

 Name: {{customer.name}} Address: {{customer.address}}

输出结果:

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

说明: 可见 不同的controller 有不同的作用范围。虽然指令一样,每次渲染都是分离的,所以我们可以抽象出来指令,用于html模板和代码的重用,封装。但是这样又不是很好,因为用了两个controller,我们可以使用指令中的scope而不是controller里的scope来替代,具体做法是将外部的scope 映射到指令内部的scope, 如下:

② 通过指令属性映射scope

html结构:

 div ng-app="myApp" ng-controller="myCtrl" 
 ="naomi" /my-customer 
 ="igor" /my-customer 
 /div 

javascript 结构:

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
 $scope.igor = { name: 'Igor', address: '123 Somewhere' };
 .directive('myCustomer', function() {
 return {
 restrict: 'E',
 scope: {
 customerInfo: '=info'
 '

templateUrl html结构:

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

编译后的html结果:

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

③ 指令中的如果定义scope属性则html中的scope不会直接继承controller中的scope,在html中使用的都需要在scope:{}中声明,否则就是undefined

html 结构:

 div ng-app="myApp" ng-controller="myCtrl" 
 ="naomi" /my-customer 
 /div 

javascript结构:

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
 $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
 .directive('myCustomer', function() {
 return {
 restrict: 'E',
 scope: {
 customerInfo: '=info'
 '
 });

 templateUrl html结构:

Name: {{customerInfo.name}} Address: {{customerInfo.address}}
Name: {{vojta.name}} Address: {{vojta.address}}

html编译后的结果:

Name: Naomi Address: 1600 Amphitheatre
Name: Address:

说明: vojta 在指令中的scope没有被定义,不会直接继承在controller中的,那么他就是undefined,所以就是空白(什么都不显示)

可操作DOM的指令

创建一个用于操作dom的指令,如果需要dom操作也都应该放在指令里。

html 结构:

 div ng-app="myApp" ng-controller="myCtrl" 
 Date format: input ng-model="format" hr/ 
 Current time is: span my-current-time="format" /span 
 /div 

javascript结构:

angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.format = 'M/d/yy h:mm:ss a';
 .directive('myCurrentTime', function($interval, dateFilter) {
 return {
 restrict: 'AE',
 link: function(scope, element, attr){
 var format, timeoutId;
 /* 更新时间函数 */
 function updateTime() {
 element.text(dateFilter(new Date(), format));
 /* 监视时间格式的改变 */
 var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
 format = value;
 updateTime();
 /* 定时器 */
 timeoutId = $interval(function() {
 updateTime(); // update DOM
 }, 1000);
 /* 页面跳转后移除定时器防止内存泄露 */
 element.on('$destroy', function() {
 $interval.cancel(timeoutId);
 attrWatch(); // 移除watch

说明: 在link函数中,操作dom节点,让dom的文本节点动态显示时间跳动。在页面跳转之后及时清除定时器和监视器以免发生内存泄漏。

通过transclude和ng-transclude创建可包裹其他元素的指令

html结构:

 div ng-app="myApp" ng-controller="myCtrl" 
 my-dialog Check out the contents, {{name}}! /my-dialog 
 /div 

javascript结构:

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.name = 'Tobias';
 .directive('myDialog', function() {
 return {
 restrict: 'E',
 transclude: true,
 scope: {},
 ',
 link: function(scope) {
 scope.name = 'Jeff';
});

templateUrl html 结构:

 div ng-transclude /div 

编译后的html结构:

Check out the contents, Tobias!

说明: 指令中的scope本应隔离controller中的作用域的,但是由于设置了transclude=true选项,scope就会继承controller中的定义,所以最终是Tobias而不是Jeff。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

小程序解决方法_详解angular 中的自界说指

公司新闻 2021-01-11
详细说明angular 中的自定命令之详细说明API 表明: 这里,myCtrl 中界定的 $scope.customer 特...
查看全文

广州凡科互联网科技股份有限公司招聘尚

公司新闻 2021-01-11
招聘人数:8职位信息【岗位职责】1、负责公司项目的整体营运(包括市场端、销售端、产品端...
查看全文

广州凡科互联网科技股份有限公司招聘主

公司新闻 2021-01-11
招聘人数:30职位信息工作职责:1、负责公司网络***渠道的拓展和维护;2、利用各网络平台,...
查看全文
返回全部新闻


区域站点: 南丰县如何创建网站   南宫市建站公司   囊谦县建网站   南和县一键建站   南华县如何创建网站   南江县建站公司   南京市建网站   南靖县一键建站   南康市如何创建网站   南乐县建站公司   南陵县建网站   南宁市一键建站   南平市如何创建网站   南皮县建站公司   南市区建网站   南通市一键建站   南投县如何创建网站   南雄市建站公司   南溪县建网站   南阳市一键建站   南漳县如何创建网站   南召县建站公司   南郑县建网站   那坡县一键建站   那曲县如何创建网站   纳雍县建站公司   讷河市建网站   内黄县一键建站   内江市如何创建网站   内丘县建站公司   内乡县建网站   嫩江市一键建站   聂荣县如何创建网站   尼玛县建站公司   尼木县建网站   宁安市一键建站   宁波市如何创建网站   宁城县建站公司   宁德市建网站   宁都县一键建站   宁国市如何创建网站   宁海县建站公司   宁化县建网站   宁晋县一键建站   宁陵县如何创建网站   宁明县建站公司   宁南县建网站   宁强县一键建站   宁陕县如何创建网站   宁武县建站公司   宁乡市建网站   宁阳县一键建站   宁远县如何创建网站   农安县建站公司   磐安县建网站   盘锦市一键建站   盘山县如何创建网站   磐石市建站公司   盘州市建网站   蓬安县一键建站   澎湖县如何创建网站   蓬莱市建站公司   彭山县建网站   蓬溪县一键建站   彭阳县如何创建网站   彭泽县建站公司   彭州市建网站   偏关县一键建站   平安县如何创建网站   平昌县建站公司   平定县建网站   屏东县一键建站   平度市如何创建网站   平果县建站公司   平和县建网站   平湖市一键建站   平江县如何创建网站   平乐县建站公司   平凉市建网站   平利县一键建站   平罗县如何创建网站   平陆县建站公司   屏南县建网站   平泉市一键建站   屏山县如何创建网站   平顺县建站公司   平塘县建网站   平潭县一键建站   平武县如何创建网站   萍乡市建站公司   平乡县建网站   平阳县一键建站   平遥县如何创建网站   平阴县建站公司   平邑县建网站   平远县一键建站   平舆县如何创建网站   皮山县建站公司   普安县建网站   浦北县一键建站   浦城县如何创建网站   普洱市建站公司   普格县建网站   浦江县一键建站   普兰县如何创建网站   普宁市建站公司   莆田市建网站   迁安市一键建站   乾安县如何创建网站   潜江市建站公司   潜山市建网站  

友情链接: 自助建站 怎么自己建网站 免费网站建设 外包建站公司 手机版

Copyright © 2002-2020 建网站_一键建站_如何创建网站_建站公司_个人博客免费建站平台 版权所有 (网站地图) 备案号:粤ICP备10235580号