9

警告：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
    };
})

任意のガイドラインをいただければ幸いです。ありがとう！

4

2 に答える 2

16

マティアス、ここに動作するjsFiddleがあります：http：//jsfiddle.net/pkozlowski_opensource/Z6RzD/

実際に起こっていることはたくさんありましたが、最も重要なことは、Scope。$ applyを使用して、「環状の世界の外」から角度通知スコープを変更する必要があるという事実だと思います。デフォルトでは、angularはすべてのDOMイベントでテンプレートの再評価をトリガーしないため、applyにラップする必要があります。

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

詳細はこちら：http：//docs.angularjs.org/api/ng.$ro​​otScope.Scope

あなたの例で注目に値する他の項目もあります：

  • 'label'を属性としてディレクティブに渡し、それをテンプレートで使用できるようにしたいと思います。その場合は、{{label}}式を使用する必要があります。
  • 'id'属性の用途がよくわからなかったので、フィドルから省略しました
  • 'showInput'についても同じです-取得しようとしているものが何であるかを完全に理解できませんでした
于 2012-07-31T17:34:26.443 に答える
0

また、$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
 };
});
于 2015-01-11T00:50:59.810 に答える