Home > Web Front-end > JS Tutorial > How to use angular's ​​custom directives

How to use angular's ​​custom directives

php中世界最好的语言
Release: 2018-03-16 17:15:17
Original
1640 people have browsed it

This time I will show you how to use angular's custom instructions. What are the precautions when using angular's custom instructions. The following is a practical case, let's take a look.

Customized specification

angular.module(&#39;dir&#39;,[  ]).directive( &#39;mydir&#39; ,function(  ){   return {template:&#39;<div>hello</div>&#39;}} )
Copy after login

Customized specification extends the attributes of the original html.

Specified application:

<div mydir> </div>写成自定义属性                      ----A----属性
-<mydir></mydir>写成元素。注意如果需要改变模板路径里面的内容,就需要使用ng-transclude,然后在模板指令的配置项里写
return {templateUrl :../template.html,transclued:true}          -----E----元素
Copy after login

You can write templateUrl(scope:{footer:@footer}) in the configuration item (note that footer in the element tag in @footer is an attribute ),

Error: $compile:iscp
Copy after login
Invalid Isolate Scope Definition
Description
When declaring isolate scope the scope definition object must be in specific format which starts with mode character (@&=<), after which comes an optional ?, and it ends with an optional local name.
myModule.directive(&#39;directiveName&#39;, function factory() {  return {
    ...
    scope: {      &#39;localName&#39;: &#39;@&#39;, // OK
      &#39;localName2&#39;: &#39;&attr&#39;, // OK
      &#39;localName3&#39;: &#39;<?attr&#39;, // OK
      &#39;localName4&#39;: &#39; = attr&#39;, // OK
      &#39;localName5&#39;: &#39; =*attr&#39;, // OK      
      &#39;localName6&#39;: &#39;attr&#39;,    // ERROR: missing mode @&=<
      &#39;localName7&#39;: &#39;attr=&#39;,   // ERROR: must be prefixed with @&=<
      &#39;localName8&#39;: &#39;=attr?&#39;,  // ERROR: ? must come directly after the mode
      &#39;localName9&#39;: &#39;<*&#39;  // ERROR: * is only valid with =
    }
    ...
  }
});
Copy after login

Multiple words in the directive use camel case naming ('myDir'). You can use my-dir to write instructions in html, because html is not case-sensitive.
-- replace: true in templateUrl(scope:{footer:@footer}, replace:true) can replace the custom-specified tag.

The form of the specified class:

, but because the default is A||E, a matching mode configuration item needs to be added:
templateUrl (scope:{footer:@footer}, restrict:C) can be added successfully. ------Category C------

There are four matching modes in total: A, C, E, M (Comment , less commonly used), if not Write the matching pattern, the default is A || E.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

$watch, $apply and $digest data binding process detailed explanation

javascript must-have detailed explanation

What are the built-in objects of js

The above is the detailed content of How to use angular's ​​custom directives. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template