javascript - AngularJS 自定义指令 ng-show/ng-hide

Question

警告:前面是 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
    };
})

任何指南将不胜感激。谢谢!

Answer 1

Matias，这是一个有效的 jsFiddle:http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

确实发生了很多事情，但我认为最重要的是您需要使用 Scope.$apply 以从“anular 的世界之外”更改 Angular 通知范围。默认情况下，angular 不会在每个 DOM 事件上触发模板重新评估，因此您需要将其包装到应用中:

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

更多信息在这里:http://docs.angularjs.org/api/ng.$ro​​otScope.Scope

您的示例中还有其他值得注意的事项:

• 我想您希望能够将“label”作为属性传递给您的指令，然后在您的模板中使用它——如果是这样，您需要使用 {{label}} 表达式
• 我不太确定“id”属性有什么用，所以在我的 fiddle 中省略了它
• 对于“showInput”也是如此 - 无法完全弄清楚你想要得到的东西是什么