web-dev-qa-db-ja.com

ディレクティブ内の要素にhtmlを追加し、それと対話するローカル関数を作成します

私のAngularJSアプリケーションでは、どこにでも複雑な入力があります。たとえば、一部の入力には、GoogleプレイスまたはTwitterブートストラップからのオートコンプリートでオートコンプリートを使用するためのディレクティブがあります。

IOS機能などのテキストを追加するときに消去ボタンを表示するディレクティブを作成する方法を探しています。

これを作成しましたが、scope.eraseが起動せず、ng-showも起動しません。

テキスト入力後にHTMLを追加し、コントローラー内でそれらを「再生」することは可能ですか？

私のテスト：

app.directive('eraseBtn', function($parse, $compile){

return {
    require: 'ngModel',
    restrict: "A",
    transclude: true,
    link : function(scope, element, attrs, model){

        element.parent().append('<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>');

        scope.erase = function(){
            console.log('Erase test');
        }
    }
}
});

入力のHTMLはすべてまったく異なるため、テンプレートを使用したくありません。

javascriptangularjsdirective
22
harkor

モデルの値に応じて、ディレクティブのリンク関数内にカスタム入力を作成できます。その要素をモデルにバインドするか、ディレクティブを使用して構築する場合は、$compileを使用する必要があります（モデルでコンパイル済みテンプレートを呼び出すことを忘れないでください）。

[〜＃〜] html [〜＃〜]

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div demo-directive ng-repeat="input in inputs"></div>
  </body>

</html>

JavaScript

angular.module('demo', []).
  controller('demoController', function($scope) {
    $scope.inputs = [{
      inputType: 'checkbox',
      checked: true,
      label: 'input 1'
    }, {
      inputType: 'text',
      value: 'some text 1',
      label: 'input 2'
    }];

    $scope.doSomething = function() {
      alert('button clicked');
    };
  }).
  directive('demoDirective', function($compile) {
    return {
      template: '<div><label>{{input.label}}: </label></div>',
      replace: true,
      link: function(scope, element) {
        var el = angular.element('<span/>');
        switch(scope.input.inputType) {
          case 'checkbox':
            el.append('<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>');
            break;
          case 'text':
            el.append('<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=\'\'; doSomething()">X</button>');
            break;
        }
        $compile(el)(scope);
        element.append(el);
      }
    }
  });

プランカー： http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview

42
Vadim