4

プランカー

ビュー内にディレクティブを含む外部コントローラーがあります。ディレクティブはプロセス ポイントのリストを取得し、それぞれを選択できるリンクを生成します。リンク関数で HTML を正しく設定しますが、リンクの ng-click アクションは機能しません。

何か案は？:)

非プランカリングのコード

HTML

<!DOCTYPE html>
<html>

  <head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="widget">
      <process stages="production" at="productionAt"></process>
    </div>
  </body>

</html>

JS

angular.module('app', ['app.directives', 'app.controllers']);

angular.module('app.controllers', [])
 .controller('widget', function($scope) {
    var selectStage = function () {
      alert(this.label + " selected.");
      $scope.processAt = this;
    }

    $scope.production = [
        {label: "Starting", select: selectStage}
      , {label: "Fermenting", select: selectStage}
      , {label: "Pouring",     select: selectStage}
      , {label: "Beer!",  select: selectStage}
    ];

    $scope.productionAt = $scope.production[0];
 });

angular.module('app.directives', [])
 .directive('process', function() {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
      , link: function postLink(scope, element, attrs) {
          for (var i = 0; i < scope.stages.length; i++) {
            var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
            if (scope.at == scope.stages[i]) {
              $stage.addClass('active');
            }
            $(element).append($stage);
          }
        }
    }
  });
4

2 に答える 2

8

ディレクティブを機能させるng-clickには、最初に angular インフラストラクチャによって処理 (「コンパイル」) する必要があるためli、ディレクティブに要素が存在する手がかりがない角度について手動で要素を作成する代わりにng-repeat、次のようにディレクティブ テンプレートで使用できます。 (DOM 要素を手動で作成する必要はありません):

angular.module('app.directives', [])
 .directive('process', function() {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"><li ng-class="{active: stage==at}" ng-click="stage.select()" ng-repeat="stage in stages"><a>{{stage.label}}</a></li></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
    }
  });

変更されたプランカー: http://plnkr.co/edit/SW1Ph0nIjVYW3UzixtBx?p=preview

私はそれが最もエレガントなソリューションだと思います。もちろん、テンプレートを永遠のファイルに移動して、 経由で参照することもできますtemplateUrl。

$compileまたは、アイテムを手動で追加した後に要素でサービスを使用することもできますがli、ハックのように感じます。

于 2013-08-03T08:09:49.477 に答える
2

作業URL http://plnkr.co/edit/3zuDuQDjhA5UY5nLD09Z?p=preview

url ディレクティブで以下の変更を行ってください

angular.module('app.directives', [])
 .directive('process', function($compile) {
    return {
        restrict: 'E'
      , replace: true
      , template: '<ol class="nav nav-pills"></ol>'
      , scope: {
            stages: "="
          , at: "="
        }
      , link: function postLink(scope, element, attrs) {
          for (var i = 0; i < scope.stages.length; i++) {
            var $stage = $('<li ng-click="stages['+i+'].select()"><a>'+scope.stages[i].label+'</a></li>');
            if (scope.at == scope.stages[i]) {
              $stage.addClass('active');
            }
            $(element).append($stage);
            $compile($(element))(scope);
          }
        }
    }
  });

私は $complie を注入し、1 行 $compile($(element))(scope); を追加しました。

于 2013-08-03T08:02:37.963 に答える