在编写Angular指令时,可以使用以下任何函数来操作声明指令的元素的DOM行为,内容和外观:
对于应该使用哪种功能似乎存在一些混淆.这个问题包括:
有些地方似乎使用控制器功能用于指令逻辑而其他地方使用链接.角度主页上的选项卡示例使用控制器作为一个,并链接另一个指令.两者有什么区别?
有人可以简单解释一下吗?
文档似乎有点迟钝.我没有得到何时使用一个而不是另一个的本质和全局.两个对比的例子很棒.
我想$compile在函数内部的控制器中使用而不是在指令中使用.可能吗?我正在尝试下面的代码.
$compile('<div ng-attr-tooltip="test">Cancel</div>')(scope)
Run Code Online (Sandbox Code Playgroud)
但这是投掷范围是未定义的错误.我试图传递$scope函数内部,但它无法正常工作.
放在jsfiddle上的角度代码是关于一个自定义指令,它使用$compile($element)($scope)并导致ng-click操作发生两次:我的问题是:
$compile($element)($scope)什么?以下是我到目前为止收集的细节和内容:
我想了解,为什么ng-click动作会发生两次?以下行显示自定义指令"hello"并按下按钮.自定义指令调用$compile($element)($scope),这是导致操作被触发两次的行,但我不明白如何?
测试点击!
这是代码 - http://jsfiddle.net/4x4L3gtw/27/
<div ng-app='myApp' ng-controller='DirectiveTestController'>
<button hello ng-click="testClick()">Test CLICK!</button>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('DirectiveTestController', ['$scope',
function ($scope) {
$scope.testClick = function () {
window.alert("hey");
console.log("hey");
}
}]);
myApp.directive('hello', function () {
return {
scope: true,
controller: ['$scope', '$element', '$compile', function ($scope, $element, $compile) {
$element.removeAttr('hello');
// $element.removeAttr('ng-click');
$compile($element)($scope);
}]
};
});
Run Code Online (Sandbox Code Playgroud)
调用的目的是$compile($element)($scope)什么,如果没有调用会发生什么,在什么情况下应该调用它?
(点击按钮,你会发现动作发生了两次)
该指令的目的是基于某些逻辑隐藏/禁用.所以在这个指令中我看到$element.removeAttr("ng-hide")等等,每次$element.removeAttr调用它后跟一个$compile($element)($scope),是重写DOM的目的吗?
我检查了DOM,但是我没有看到多次定义ng-click.在检查DOM(firebug)时,我查看了$ …
我正在尝试创建一个可以增强HTML元素的指令.所以我设法让指令运行并与元素关联我的当前代码是这样的:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'C',
replace: false,
scope: {},
link: function(scope, element, attrs) {
}
}
});
Run Code Online (Sandbox Code Playgroud)
现在我想为HTML元素添加新方法,例如我想这样做:
// Pseudo code
myElement.reset();
myElement.reload(); // etc.
Run Code Online (Sandbox Code Playgroud)
将这些方法添加到指令的最佳方法是什么?