This topic describes the last two attributes of a command: require and controller.
When a command needs to communicate with the parent element command, they will use these two attributes. What does it mean:
HTML:
<outer‐directive> <inner‐directive></inner‐directive></outer‐directive>
There are two commands, an outer-ctictive command element, which contains an inner-Directive command element.
JS:
App. directive ('outerctive', function () {return {scope :{}, restrict: 'AE', Controller: function ($ scope, $ compile, $ HTTP) {This. addchild = function (nesteddirective) {// This indicates the controller console. log ('got the message from nested ctive Ve' + nesteddireve. message );}}}});
App. Directive ('innerctive', function () {return {scope :{}, restrict: 'AE', require: '^? Outerdireve ve ', link: function (scope, ELEM, attrs, CTRL) {// The fourth parameter is the scope of your require controller instance. message = 'Hi, parent ctive Ve'; ctrl. addchild (scope );}};});
Define the Controller Method in the parent element command:
Function ($ scope, $ compile, $ HTTP) {This. addchild = function (nesteddirective) {// This indicates the controller console. log ('got the message from nested ctive Ve' + nesteddireve. message );}}
The Controller method is a constructor. You can add an object to it. (For the object method, see MVC-JavaScript-web-application/01. MVC and class/1. create a class library/Ex1.3(.html of the object).
Define the require attribute in the sub-element command: require: '^? Outerdireve ve 'indicates to search for the outerdirective command from the outer layer until it is found .'? 'Does not return an error if it cannot be found.
After the require attribute is defined, Ctrl, the fourth parameter of the link function, is the instance of the Controller Method of the command returned by require. Therefore, CTRL has the addchild method.
The following is a difficult example:
Angular learning notes (30)-instruction (9)-a simple instruction example. This example is an expanded and collapsed sub-menu. The following uses require and controller to expand the application, to change to multiple menus, you need to expand the menu when you click a menu, while other menus are collapsed:
The process is as follows:
HTML:
<! Doctype HTML> <HTML ng-APP = "accordionmodule">JS:
/* 20.10 command */var accordionmodule = Angular. module ('accordionmodule', []); accordionmodule. controller ('accordionctrl ', function ($ scope) {$ scope. lists = [{Title: 'title 1', contents: ['bunny1', 'cat1', 'dog1 ']}, {Title: 'title 2', contents: ['bunny2', 'cat2', 'dog2']}, {Title: 'title 3', contents: ['bunny3', 'cat3', 'dog3']}, {Title: 'heading 4', contents: ['bunny4', 'cat4', 'dog4 ']}, {Title: 'heading 5', contents: ['bunny5 ', 'cat5', 'dog5 ']}, {Title: 'Heading 6', contents: ['bunny6', 'cat6', 'domain6']}, {Title: 'heading 7', contents: ['bunny7 ', 'cat7', 'dog7 ']}, {Title: 'heading 8', contents: ['bunny8', 'cat8', 'ocg']}); accordionmodule. directive ('accordion', function () {return {restrict: 'ea ', replace: True, templateurl: 'vertical.html', transclude: True, Controller: function () {This. expanders = []; this. closeall = function (scope) {angular. foreach (this. expanders, function (expand Er) {If (scope! = Expander) expander. ifshow = false ;})}; this. addexpander = function (scope) {This. expanders. push (scope) }}); accordionmodule. directive ('pander', function () {return {restrict: 'ea ', replace: True, templateurl: 'text.html', transclude: True, scope: {Title: '@ mytitle'}, require:' ^? Accordion ', link: function (scope, ELE, attrs, CTRL) {scope. ifshow = false; ctrl. addexpander (scope); scope. toggle = function () {ctrl. closeall (scope); scope. ifshow =! Scope. ifshow ;}}}});This application is explained as follows:
1. The controller instance of the accordion command is the fourth parameter of the link function. CTRL
2. Execute the expander command ng-repeat to render multiple sub-menus.
3. Because these sub-menus are correlated rather than independent, they are placed in an accordion command.
4. The data model to be bound is the same as the expander. The only difference is:
1) Call the addexpander method of CTRL in the link function, and press the independent scope of each expander into the expanders array of ctrl.
2) Toggle () method, which calls the method of the controller instance of the accordion command.
5. note that CTRL is the only Ctrl, instead of generating a new instance every time. although there are multiple expanders, its CTRL points to the same instance, so the expanders array is unique.
6. The expanders array stores the scope of each expander. Why is it scope rather than element? Because the closeall method needs to modify ifshow under the Independent scope of the instruction, it is better to store scope in the array here.
Full: https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.10%20%E6%8C%87%E4%BB%A4.html
Https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js
Angular Study Notes (30)-Instructions (10)-require and Controller
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
