83

Angular.factory で AlertFactory を作成したいと考えています。次のようなhtmlテンプレートを定義しました

var template = "<h1>{{title}}</h1>";

タイトルはコントローラーを呼び出すことによって提供され、次のように適用されます

var compiled = $compile(template)(scope);
body.append(compiled);

では、分離されたスコープをコントローラーからファクトリーに渡すにはどうすればよいでしょうか? コントローラーフォローコードで使用しています

AlertFactory.open($scope);

ただし、$scope はグローバル コントローラー スコープ変数です。title プロパティだけで factory の小さなスコープを渡したいだけです。

ありがとうございました。

4

5 に答える 5

110

新しいスコープを手動で作成できます。

$rootScope注入する場合、またはコントローラースコープから新しいスコープを作成できます-分離するので、これは問題ではありません。

var alertScope = $scope.$new(true);
alertScope.title = 'Hello';

AlertFactory.open(alertScope);

ここで重要なのは に渡すtrueこと$newです。これは の 1 つのパラメーターを受け入れisolate、親からのスコープの継承を回避します。

詳細については、http: //docs.angularjs.org/api/ng.$ro​​otScope.Scope#$newをご覧ください。

于 2013-03-22T00:48:11.187 に答える
22

補間するだけでよい場合は、$compileの代わりに$interpolateサービスを使用すれば、スコープは必要ありません。

myApp.factory('myService', function($interpolate) {
    var template = "<h1>{{title}}</h1>";
    var interpolateFn = $interpolate(template);
    return {
        open: function(title) {
            var html = interpolateFn({ title: title });
            console.log(html);
            // append the html somewhere
        }
    }
});

テストコントローラー：

function MyCtrl($scope, myService) {
    myService.open('The Title');
}

フィドル

于 2013-03-22T04:37:49.227 に答える
2

手順は次のとおりです。

  1. を使用して HTML を DOM に追加します。var comiledHTML = angular.element(yourHTML);
  2. 必要に応じて新しいスコープを作成しますvar newScope = $rootScope.$new();
  3. $comile(); を呼び出します。リンク関数を返す関数var linkFun = $compile(comiledHTML);
  4. linkFun を呼び出して新しいスコープをバインドしますvar finalTemplate = linkFun(newScope);
  5. finalTemplate を DOM に追加する YourHTMLElemet.append(finalTemplate);
于 2015-07-24T05:03:03.490 に答える
1

分離スコープについて話しているときは、ディレクティブについて話していると思います。

これを行う方法の例を次に示します。 http://jsfiddle.net/rgaskill/PYhGb/

var app = angular.module('test',[]);

app.controller('TestCtrl', function ($scope) {
    $scope.val = 'World';
});

app.factory('AlertFactory', function () {

    return {
        doWork: function(scope) {
            scope.title = 'Fun';    
            //scope.title = scope.val;  //notice val doesn't exist in this scope
        }
    };

});

app.controller('DirCtrl', function ($scope, AlertFactory) {
    AlertFactory.doWork($scope);  
});

app.directive('titleVal',function () {
    return {
        template: '<h1>Hello {{title}}</h1>',
        restrict: 'E',
        controller: 'DirCtrl',
        scope: {
            title: '='
        },
        link: function() {

        }
    };

});

基本的に、分離スコープを定義したディレクティブにコントローラーをアタッチします。ディレクティブコントローラーに挿入されるスコープは、分離スコープになります。ディレクティブコントローラーでは、分離スコープを渡すことができるAlertFactoryを挿入できます。

于 2013-03-22T03:33:01.827 に答える