警告:Angular新手未来。
我正在尝试创建一个自定义窗口小部件,默认情况下会显示“回复”链接,单击时,应隐藏它并显示文本区域。这是我到目前为止所做的,但它不起作用::
.directive('replybox', function ($rootScope) {
var linkFn = function (scope, element, attrs) {
var label = angular.element(element.children()[0]);
scope.showInput = false;
label.bind("click", textbox);
function textbox() {
scope.showInput = true;
}
};
return {
link:linkFn,
restrict:'E',
scope:{
id:'@',
label:'@',
showInput:'='
},
template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>',
transclude:true
};
})
任何指南都将不胜感激。谢谢!
答案 0 :(得分:16)
Matias,这是一个有效的jsFiddle:http://jsfiddle.net/pkozlowski_opensource/Z6RzD/
确实有很多事情发生,但我认为最重要的事情是你需要使用Scope。$ apply以从'anular'世界之外的地方改变角度通知范围。默认情况下,angular不会触发模板重新评估每个DOM事件,因此您需要将其包装到apply:
scope.$apply('showInput = true');
更多信息:http://docs.angularjs.org/api/ng.$rootScope.Scope
在您的示例中还有其他值得注意的项目:
答案 1 :(得分:0)
您还可以使用$ timeout来通知您的更改角度,例如
.directive('replybox', function($rootScope, $timeout) {
var linkFn = function(scope, element, attrs) {
var label = angular.element(element.children()[0]);
scope.showInput = false;
label.bind("click", textbox);
function textbox() {
$timeout(function() {
scope.showInput = true;
});
}
};
return {
link: linkFn,
restrict: 'E',
scope: {
id: '@',
label: '@',
showInput: '='
},
template: '<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>',
transclude: true
};
});