A custom label
use camel nomenclature, that is, except for the first letter of the first word to be capitalized. Such as: myDirective. When the instruction is called html page needs to be - divided, such as: my-directive. In the custom component (Directive) in, template configuration DOM, compile generated DOM, listening DOM, modifications rendering the content, link (after the compile) operation DOM. In the directive, the event listener mechanism to bind dom statically generated, the dynamic generation of DOM nodes are not listening JS event, in order to monitor you must recompile. When do I need to call $ apply methods? $ apply () method can perform angular JS expression outside the angular frame, for example: DOM event, setTimeout, XHR, or other third-party libraries. $ watch () method executes the callback function according to the change intercepted object.
if (that.alertHtml && that.alertMethod) {
that.alertScope = $rootScope.$new();
angular.extend(that.alertScope, that.alertMethod);
angular.element(document.getElementById('#myAlert')).empty().append($compile(angular.element(that.alertHtml))(that.alertScope));
//$compile(DOM元素)(作用域)
}
<!DOCTYPE html>
<html lang="en" ng-app="appModule" >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body >
<div ng-controller="parent">
{{ message }}
<div otc-dynamic></div>
</div>
</body>
</html>
<script>
var app = angular.module('appModule',[]);
app.controller("parent",function($scope){
$scope.label = "Please click";
$scope.message = "message";
$scope.doSomething = function(){
$scope.message = "Clicked!";
};
});
};
/*app.directive("otcDynamic",function () {
return {
Template: "<Button-ng the Click = 'doSomething ()'> {{}} label </ div>"
};
}); * /
App. Directive ( "otcDynamic", function () {
return {
Link: function (scope, Element) {
element.html ( "<Button-ng the Click = 'doSomething ()'> label {} {} </ Button>"); / * this is the data binding, compile can bind an event already finished * /
the Element.on ( "the Click", function () {
scope the Apply $ (scope.doSomething ());. / * when do I need to call ? $ apply the method it $ apply () method can be performed outside of the angular frame angular JS expression, for example: DOM event, setTimeout, XHR, or other third-party libraries * /
});/ * This is the event binding * /
}
});
</ Script>
app.directive ( 'myDirective', function () {
// return the objects out, <my-directive> This is the original content </ my-directive>; controller to run, after running compile, link does not run
return {
the require : "parent", // this command depends parent element,
the restrict: 'E', // instruction type E: element a: attribute M: C Comment: class
Replace: to true, // the template on <my-directive > internal or replace it, the default is false, on the internal
scope: {
title: '@'
// the attribute value obtained from a defined tag // false: inherit parent scope; true: inherit parent scope acting independently and creating domain; {}: not inherit parent scope and create independent scope .scope: {name: '@ name ', bind string name: '= name', bind variable name: '& name', binding function} the variables passed in, after the value is changed, the value of the variable parent scope also changed.
},
Template: '<div> I command generating <div ng-transclude> </ div> into content < / div> ',// templateUrl import templates custom elements
transclude: true,
// whether to retain the custom command sub-element content (which is the original content), the local content into the template using ng-transclude attributes, above. <div ng-view> </ div> by routing into data
Controller: function ($ scope) {
// Controller function is mainly used for (1) introducing the custom service (2) to write the business logic.
scope.focusAAA function = $ () {}
},
the compile: function (Element, Attributes) {
// the compile and link are repulsive. If both the two, compile the function returns will be replaced as the link function to link the function definition behind, that is, behind the link function will not count.
},
Link: function (scope, Element, attr, parentCtrl, Linker) {// Link function is mainly used to operate dom element to element binding dom event and listener.
the Element.on ( 'the Click', function () {});
// = Element> myDirective
// scope: the scope of instructions is located.
// element: element package instructions, you can call the methods and properties jq angular stripped package
// attr: attribute elements instruction set
// parentCtrl: parent element defined point Controller
// linker: embedded inside the content for transClude
}
}
});
Second, custom labels nested
template: "<div> <p > first paragraph </ p>" + "< div ng-transclude> </ div>" + "<p> second paragraph </ p>" + "< div> {{ }} parentName </ div> </ div> ",
// Template: '<div> I command generating <div ng-transclude> </ div> into content </ div>', // templateUrl import the custom template element
the restrict: 'E',
// instruction type E: element a: attribute M: C Comment: class
replace: to true,
// the template on <my-parent> substituted or inside it, the default is false, on the inside
transclude: to true,
// whether to retain the custom instruction content between the opening and closing tags, where the content into the template using ng-transclude attribute defaults to false, as described above. <div ng-view> </ div> by routing data placed
scope:{
// the attribute value obtained from custom labels to false //: inherit parent scope; to true: inherit parent scope and create independent scope; {}: not inherit parent scope and create separate scope.
// scope: {name: '@ name', bind string name: '= name', bind variable name: ' & Name ',} binding function. Variables passed in, after the value is changed, the value of the variable parent scope has changed.
},
Controller: function ($ scope) {/ * The above template left controller is controller * /
Controller and link // instructions may be interchanged. The main controller is used to (1) an act of providing reusable between instruction; (2) introduced into service or custom built.
scope.focusAAA function = $ () {};
$ scope.parentName = "variable defined in myParent Lane.";
this.parentMethod = function () {
the console.log ( 'This method is called a sub-scope.' );
}
},
/ * the compile: function (Element, Attributes) {
// the compile and link are repulsive. If both the two, compile the function returns will be replaced as the link function to link the function definition behind, that is, behind the link function will not count. first controller, run, after compile, link does not run
} * /
link: function (scope, Element, attr, Ctrl, Linker) {
// instructions and link controller can be interchanged. The main link is used to (1) define the behavior of the current internal instruction between instruction can not be multiplexed; (2) can not be introduced into service or custom built.
// scope: the scope of instructions where
// element: element package instructions, can call the methods and properties jq angular stripped packages, such as element.css ()
// attr: attribute elements instruction set, such as attr.selfAttr
// ctrl: a method call other instructions, each used for communication between the command, with the need to require, as will myChild interior, ctrl.parentMethod link in ().
// linker: embedded inside the content for transclude
}
}
});
app.directive ( 'myChild', function () {
return {
Template: "<div> <span> here span1; </ span> <span > here span2. </ span> <div ng-transclude> </ div> </ div> ",
Replace: to true,
transclude: to true,
scope: {},
the require: '? ^ myParent' ,
controller: function ($ scope) {},
/ * the compile: function (Element, Attributes) {}, * /
// 'myParent': Find the controller in the current instruction; '^ myParent' upstream seek control instruction is; '? ^ myParent': the current instruction, if not, to find the upstream
link: function (scope, element, attr, ctrl,
ctrl.parentMethod();
}
}
})
</script>
</body>
</html>