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()from mainController，所以我希望调试窗口出现在我的屏幕上。我想显示数组current和数据服务total的状态unlocked。Data

实际上，窗口出现在屏幕上，但我在上面看到了这个：

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工作的？我正确使用了这个？

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从您的模板中删除了，因为您实际上可以通过为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 回答