AngularJS定制指令NG-显示/ NG隐藏

我试图创建一个自定义窗口小部件时默认显示“回复”链接，并点击时，它应该被隐藏，一个文本应该显示。这是我到目前为止，但它不工作::

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

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

来源

2012-07-31 Matt

马蒂亚斯，这里是一个工作的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

有准备的东西数量上真的，但我认为最重要的是，你需要使用范围的事实$适用于有角的通知。范围从“世界之外的世界”变化。默认情况下，角度并不对每一个DOM事件触发模板重新评估，所以你需要将它包装成适用于：

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

这里更多信息：http://docs.angularjs.org/api/ng 。$ rootScope.Scope

也有值得关注您的示例中的其他项目：

我猜你想能够通过“标签”，以您的指令属性，然后用它您的模板 - 如果是这样，你需要使用{{标签}}表达
我不太确定'id'属性的用法是什么，所以从我的小提琴中省略它
同样的'showInput' - 不能完全弄清楚你想要得到什么东西

来源

2012-07-31 17:34:26

我可以问一个完整的例子吗？ – honzajde 2013-01-04 01:58:06

@ user271996有附答案一个完整的示例的jsfiddle。你还错过什么？在模板 – 2013-01-04 08:42:27

你或许可以通过绑定标签点击功能NG-点击的链接功能手动安装它来代替。 – 2013-01-13 10:53:30

也CA使用$超时通知角的更改，如

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

来源

2015-01-11 00:50:59

AngularJS定制指令NG-显示/ NG隐藏

回答

相关问题