AngularJS自定义指令ng显示/ng隐藏

AngularJS custom directive ng-show/ng-hide

本文关键字：ng 隐藏 显示 AngularJS 指令 自定义      更新时间：2024-05-18

警告：前方是角度新手。

我正在尝试创建一个自定义小部件，默认情况下会显示一个"回复"链接，当单击时，它应该被隐藏，并显示一个文本区域。以下是我到目前为止所拥有的，但它不起作用：：

  .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
    };
})

任何指导方针都将不胜感激。谢谢

Matias，这里是一个正在工作的jsFiddle：http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

确实有很多事情在进行，但我认为最重要的是你需要使用Scope$申请从"环形世界之外"更改角度通知范围。默认情况下，angular不会触发模板对每个DOM事件的重新评估，因此您需要将其包装为apply:

scope.$apply('showInput = true');

更多信息请点击此处：http://docs.angularjs.org/api/ng.$rootScope。范围

在您的示例中还有其他值得注意的项目：

  • 我想您希望能够将"label"作为属性传递给指令，然后在模板中使用它-如果是这样，您需要使用｛｛label｝｝表达式
  • 我不太确定"id"属性有什么用，所以我把它从小提琴里省略了
  • "showInput"也是如此——无法完全弄清楚你想要得到的是什么

您也可以使用$timeout来通知angular您的更改，例如

.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
 };
});
相关文章：