Those who have used AngularJS should be most interested in its commands. Currently, only AngularJS supports custom commands, and AngularJS is the only framework that provides reusable Web applications. Many JavaScript products currently provide plug-ins... SyntaxHighlighter. all (); those who have used AngularJS should be most interested in its commands. Currently, only AngularJS supports custom commands, and AngularJS is the only framework that provides reusable Web applications. Currently, many JavaScript products provide plug-ins to Web developers. For example, Bootstrap is a popular front-end development toolkit that provides styles and JavaScript plug-ins. When using the boins in Booostrap, developers must switch to the JavaScript mode to write jQuery code to activate the ins. Although jQuery code is easy to write, it must be synchronized with HTML, this is a tedious and error-prone process. The AngularJS home page shows a simple example for implementing the Tab function in Bootstrap. You can easily add the Tab function on the page, and the usage is as simple as ul labels. The HTML code is as follows: copy the codeBootStrap Tab Component This is the content of the first tab. This is the content of the second tab. Copy the JavaScript code as follows: copy the code angular. module ('components', []). directive ('tabs', function () {return {restrict: 'E', transclude: true, scope :{}, controller: ["$ scope", function ($ scope) {var panes = $ scope. panes = []; $ scope. select = function (pane) {angular. forEach (panes, function (pane) {pane. selected = false;}); pane. selected = true;} this. addPane = function (pane) {if (panes. length = 0) $ scope. select (pane); panes. push (pane) ;}}], template: ''+'
'+'
- '+' {Pane. title} '+'
'+'
'+ '', Replace: true };}). directive ('pane ', function () {return {require:' ^ tabs ', restrict: 'E', transclude: true, scope: {title :'@'}, link: function (scope, element, attrs, tabsCtrl) {tabsCtrl. addPane (scope) ;}, template: ''+'', replace: true };}) copy the code you can view the effect from the following link: http://jsfiddle.net/powertoolsteam/GBE7N/1/ image as you can see, besides And Tag, the page is no different from the regular HTML page. HTML developers do not need to write any code. Of course, there is always a need for the first person to eat crabs to create commands for sharing, but currently Tabs commands are very common and can be reused anywhere (such as BootStrap, jQueryUI, Wijmo, and some well-known front-end plug-ins ). Thanks to its ease of use and ease of writing, many users have begun to write commands using AngularJS. For example, the AngularJS development team has implemented a series of commands-UI Bootstrap to replace Bootstrap Based on AngularJS; well-known ComponentOne control vendors have also created Wijmo Based on AngularJS; we can also find some public instruction databases on GitHub: jQueryUI widgets. Having AngularJS, do you think you have stood on the shoulders of giants? But don't be happy too early. If we already have so many commands for us to use, why should we learn AngularJS and why should we learn custom commands? For a simple example, you may have special requirements: Suppose you work in a financial company, you need to create a financial form, it must display data in tables, bind, edit, verify, and synchronize data updates to the server. Form plug-ins are common, but it is not clear that they can meet these specific needs. Therefore, you must create custom commands based on your actual business needs. Copy codeOffshore Investment Summary customer = "currentCustomer" country = "currentCountry"> Copying code is the purpose of this Article. Next we will discuss how to create AngularJS commands. Creating custom commands starting with the custom AngularJS command document is very simple. It only implements the synchronization function. General Commands include more elements: Copy code // create a command module (or retrieve an existing module) var m = angular. module ("myApp"); // create the "my-dir" command myApp. directive ("myDir", function () {return {restrict: "E", // The instruction is an element (not an attribute) scope :{// set the scope name for the instruction: "@", // name value transfer (string, one-way binding) amount: "=", // amount reference transfer (bidirectional binding) save: "&" // save operation}, template: // replace HTML (use the variable in scope) "" + "{name }}: "+" Save"+" ", Replace: true, // use the template to replace the original tag transclude: false, // do not copy the original HTML content controller: [" $ scope ", function ($ scope) {... }], Link: function (scope, element, attrs, controller ){...} }); The effect of copying the code is as follows: image note that this custom command follows a format: prefix with "my", similar to a namespace, therefore, if you reference multiple module commands in an application, you can easily determine the definition of the module by prefix. This is not a hard requirement, but it can bring a lot of convenience. The constructor of the command returns JavaScript objects with attributes. These contents are clearly described on the AngularJS homepage. The following is my understanding of some attributes: restrict: indicates the Application Form of commands in HTML. The backup options include "A", "E", and "C", "M ", attribute, element, class, and comment (default value: ""). We will focus more on attributes-how to create UI elements. Scope: The scope of the created instruction. scope is passed as an attribute label in the instruction. Scope is a necessary condition for creating reusable commands. Each Command (no matter which level of the nested command) has a unique scope and does not depend on the parent Scope. The scope object defines names and types variables. The preceding example creates three scope variables. Name: "@" (value transfer, one-way binding): "@" indicates that the variable is a value transfer. The command retrieves the value in the string passed from the parent scope. Command can use this value but cannot be modified. It is the most common variable. Amount: "=" (reference, two-way binding) "=" indicates that the variable is passed by reference. Command to retrieve the reference values in the main Scope. Values can be of any type, including composite objects and arrays. The command can change the value in the parent Scope. Therefore, this type is required when the Command needs to modify the value in the parent Scope. Save: "&" (expression) "&" indicates that the variable is an expression enabled in the parent Scope. It allows commands to perform more advanced operations than modifying values. Template: Replace the string marked in the original template. The replace function replaces all old elements with new values. Note how the template uses the variables defined in Scope. This allows you to create macro-style commands without writing any additional code. Replace: Indicates whether to replace the value in the original tag or append the value in the original tag. The default value is false. The original tag is retained. Transclude: indicates whether the custom Command copies the content in the original tag. For example, the preceding "tab" command sets transclude to true because the tab element contains other HTML elements. The "dateInput" command must be empty during initialization. Therefore, set transclude to false. Link: This method plays an important role in commands. It performs DOM operations and registers event listeners. The link method includes the following parameters: scope: reference of the Scope command. Scope variables are not defined during initialization. The link Method registers the monitor value change event. Element: Reference of DOM elements containing commands. The link method is generally used to operate instances through jQuery (Angular's jqLite can also be used if jQuery is not loaded ). Controller: used with nested commands. This parameter is used to provide sub-commands to parent commands and allow interaction between commands. The tab command is a typical example of using this parameter: http://jsfiddle.net/powertoolsteam/GBE7N/1/ Note: When the link method is called, The scope variables passed through the value ("@") will not be initialized, and they will be initialized at another time point in the instruction life cycle, if you need to listen to this event, you can use scope. $ watch method.
