为了账号安全,请及时绑定邮箱和手机立即绑定

angularjs directive link 属性 问题?

angularjs directive link 属性 问题?

元芳怎么了 2019-02-04 10:06:02
angular.module('docsTransclusionExample', []).controller('Controller', ['$scope', function($scope) {  $scope.name = 'Tobias';}]).directive('myDialog', function() {  return {    restrict: 'E',    transclude: true,    scope: {},    templateUrl: 'my-dialog.html',    link: function (scope, element) {      scope.name = 'Jeff';    }  };});这个在官网上的directive代码,link函数起到的什么作用,解释有点费解,然后其中有三个参数scope:is an Angular scope object.element: is the jqLite-wrapped element that this directive matches.attrs: is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.这个用法是怎样的,scope好像就是return中得scope属性。。
查看完整描述

2 回答

?
至尊宝的传说

TA贡献1789条经验 获得超10个赞

首先我们先来聊聊你列出的directive中的几个属性:

  1. restrict
    E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
    A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
    EA: 表示该directive既能以element方式使用,也能以attribute方式使用

  2. transclude
    你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。

  3. scope
    当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。

  4. templateUrl
    你的directive里的html内容

  5. link
    可以简单理解为,当directive被angular 编译后,执行该方法

这里你说的没错,link中的第一个参数scope基本上就是你说的上面写的那个scope

element简单说就是$('my-dialog')

attrs是个map,内容是你这个directive上的所有属性,例如:你在页面上如果这样写了directive:

<my-dialog type="modal" animation="fade"></my-dialog>

attrs就是:
{
type: 'modal',
animation: 'fade'
}


查看完整回答
反对 回复 2019-03-17
  • 2 回答
  • 0 关注
  • 478 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信