1

スコープ変数を表示する Angular アプリで Showdown 拡張機能を作成しようとしています。基本的なスコープ変数を簡単に表示するようにセットアップすることができましたが、今は an の結果を使用できる場所にそれを取得したいと考えており、表示ng-repeatする以外[[object HTMLUListElement]]に何も取得できません。

これまでの私のコントローラーは次のとおりです。

app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
    $scope.machines = [
        { abbv: 'DNS', name: 'Did Not Supply' },
        { abbv: 'TDK', name: 'The Dark Knight' },
        { abbv: 'NGG', name: 'No Good Gofers'}
    ];
    $scope.machine = $scope.machines[0];

    $scope.machine_list = $compile('<ul><li ng-repeat="m in machines">{{m.abbv}}: {{m.name}}</li></ul>')($scope);
  $scope.md = "{{ machine_list }}";

    var scopevars = function(converter) {
        return [
            { type: 'lang', regex: '{{(.+?)}}', replace: function(match, scope_var){
                scope_var = scope_var.trim();

                return $scope.$eval(scope_var);
            }}
        ];
    };
    // Client-side export
    $window.Showdown.extensions.scopevars = scopevars;
}]);

Plunkr:これまでのコード

近づかなければならないような気がしますが、これについて完全に間違った方向に進んでいるのか、それとも対決的なものなのか、角度のあるものなのか、それとも何なのか、今ではわかりません.

4

1 に答える 1

0

私は、自分のやり方で Angular と戦っていることに気付きました (そしてひどく沈黙を失いました)。コントローラー内の DOM はダメです。そして今、きちんと考えてディレクティブを見始めたら、それがいかに簡単であるかについてちょっと腹が立っています.

コントローラー内でコンパイルとすべてを実行しようとする代わりに、$compile使用しているディレクティブにサービスを含めました。

htmlText = converter.makeHtml(val);
element.html(htmlText);

なりました：

htmlText = converter.makeHtml(val);
element.html(htmlText);
$compile(element.contents())(scope);

この変更により、基本的な評価を行ったばかりの拡張機能の部分は不要になりました。これは、コンパイル中{{ machine.name }}に自動的に変換されるためです。

しかし、それでも変数を指定してテンプレートを挿入することはできず、変数だけを指定することができませんでした。しかし、出力が角度を介してコンパイルされるようになったので、テンプレートを部分的に配置し、拡張機能を使用してパターンから機能する に変換できng-includeます。

新しいコントローラー コード:

app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
    $scope.machines = [
        { abbv: 'DNS', name: 'Did Not Supply' },
        { abbv: 'TDK', name: 'The Dark Knight' },
        { abbv: 'NGG', name: 'No Good Gofers'},
        { abbv: 'TotAN', name:'Tales of the Arabian Nights'}
    ];
    $scope.machine = $scope.machines[0];

  $scope.tpls = {
    'machinelist': 'partials/ml.html'
  };
  $scope.md = "{{machines.length}}\n\n{{include machinelist}}";

    var scopevars = function(converter) {
        return [
          { type: 'lang', regex: '{{include(.+?)}}', replace: function(match, val){
            val = val.trim();
            if($scope.tpls[val] !== undefined){
              return '<ng-include src="\''+$scope.tpls[val]+'\'"></ng-include>';
            } else {
              return '<pre class="no-tpl">no tpl named '+val+'</pre>';
            }
          }}
        ];
    };
    // Client-side export
    $window.Showdown.extensions.scopevars = scopevars;
}]);

そしてもちろん、新しいplunkr

これが後で誰かを助けることができることを願っています

古代人の叡智

于 2015-02-21T05:46:54.577 に答える