1

私はいくつかのサービスを持っています。デバッグして、このサービスの変数の状態を確認したいです。私のコードは以下です（コードの下の説明）：

module.factory('Data', function () {
    var current = [], unlocked = [], all = [];

    return {
        current: current,
        unlocked: unlocked,
        total: all
    }
});
module.controller('debugPlaneController', ['$scope', 'Data', function ($scope, data) {
    $scope.data = data;
}]);
module.factory('someService', ['Data', function (data) {
    var initDebugMode = function () {
        var style = "style='width: 500px; height: 100px; background-color: #ccc;";
        var template = "
            <div "+style+" ng-controller='debugPlaneController'>
                <p>data.current = {{ data.current }}</p>
                <p>data.total = {{ data.total }}</p>
                <p>data.unlocked= {{ data.unlocked }}</p>
            </div>
        ";
        $(".someClass > .childClassOfSomeClass").append(template);
    };
    // some more methods, for example
    var push = function (name) {
        data.current.push(name);
        data.all.push(name);
    }
    // etc
    return {
        initDebug: initDebugMode,
        push: push
        // some more methods
    }
}]);

module.controller('mainController', ['$scope', 'someService', function($scope, someService) {
    someService.initDebug();
    someService.push('lala');
});

だから、私はコントローラを持ついくつかのアプリを持っていますmainController。その中でサービスを利用したいsomeService。pushメソッドを使用しています。nameこのメソッドは、引数からデータ サービスtotalのcurrent配列にデータをプッシュしますData。initDebug()ご覧のとおり、からメソッドを呼び出しmainControllerたので、画面にデバッグ ウィンドウを表示します。currentarraysとdata-serviceの状態totalを表示したい。unlockedData

実際には、ウィンドウが画面に表示されますが、次のように表示されます。

data.current = {{ data.current }}
data.total = {{ data.total }}
data.all = {{ data.all }}

そのため、AngularJS テンプレートは補間されませんでした。それらを補間する方法+このブロックでそれらをライブ更新する必要があります(angularJSが実際に行うように)。

アップデート

$コンパイルを使用します。

だから私は自分のinitDebugMode機能をこのように変更する必要がありますか?:

module.factory('someService', ['Data', '$compile', function (data, $compile) {
    var initDebugMode = function () {
        var style = "style='width: 500px; height: 100px; background-color: #ccc;";
        var scopeImitation = { data: data };

        var template = "
            <div "+style+" ng-controller='debugPlaneController'>
                <p>data.current = {{ data.current }}</p>
                <p>data.total = {{ data.total }}</p>
                <p>data.unlocked= {{ data.unlocked }}</p>
            </div>
        ";
        $compile(template)(scopeImitation);
        $(".someClass > .childClassOfSomeClass").append(template);
    };
// etc...
]);

$compileサービスの2 番目のブラケットに変数を正確に渡すにはどうすればよいですか? 私はこれを正しく使用しましたか？

4

1 に答える 1

1

$compile サービスを使用する必要があります。

$コンパイル

HTML 文字列または DOM をテンプレートにコンパイルし、スコープとテンプレートをリンクするために使用できるテンプレート関数を生成します。

次のように使用します。

$compile(template)($scope);

$compileただし、最初にサービスを$scopeファクトリに注入することを忘れないでください。

また、この投稿を読んで、目標を達成するために使用できる他の角度サービスを理解してください。

$parse、$interpolate、$compile サービスの違いは何ですか?

あなた$interpolateがやろうとしていることにより適しているかもしれませんが$compile、最も強力だからです。

編集について

最初は、あなたが工場の中にいるという事実にきちんと気がつきませんでした。スコープを工場に渡すことは、一般的にはお勧めできません (おそらく不可能でしょうか?)。再利用可能なデバッグ インターフェイスが必要な場合は、ファクトリに配置するのではなく、ディレクティブを作成するのが最善の方法だと思います。

module.directive('debug' , function() {
    return {
        restrict: 'E',
        template:'<div><p>data.current = {{ data.current }}</p><p>data.total = {{ data.total }}</p><p>data.unlocked= {{ data.unlocked }}</p></div>',
        controller: 'debugPlaneController'
    }
});

styleのCSSルールを定義することにより、実際にCSSからディレクティブのスタイルを設定できるため、テンプレートからを削除しましたdebug

debug > div {
    width: 500px;
    height: 100px;
    background-color: #ccc;
}

ng-controllerディレクティブはディレクティブで定義されたコントローラーを使用するため、テンプレートから削除しました。

これで、このように好きな場所にディレクティブを配置できます。$compile を気にしなくても、内部で正しくテンプレートが生成されます。

<debug></debug>

さらに、条件付きでのみ表示したい場合は、使用できますng-if

<debug ng-if="debugMode == true"></debug> //debugMode would be a variable you defined in your controller

また、あなたの質問に関して、$compile私scopeImitationはそれが以前にそのように使用されたのを見たことがないので、うまくいかないと思います. $compile私が見たものから、常に次のように書かれています$compile(thing to compile)($scope)

于 2015-02-26T21:07:19.433 に答える