How to use angular's ​​custom directives

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;}} )

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----元素

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

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 =
    }
    ...
  }
});

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!