$コンパイルでスコープ変数がHTMLに挿入されない

Question

私のスコープ変数でHTMLのレンダリングをテストしたいと思います。

HTMLは以下の通りである2 <textarea>を有する：

<textarea ng-model="a" ng-change="someFunction(a)" value={{a}}></textarea> 
<textarea ng-model="b" ng-change="someFunction(b)" value={{b}}></textarea> 

aとbは、a = someFunction(b)とb=someFunction(a)そのスコープ変数です。

説明：aを入力すると、someFunction(a)という関数が呼び出され、テキストエリアのテキストがbに変更されます。その逆も012​​です。次のように

Iが書いたユニットテストは次のとおり

var compile, 
     scope, 
     tc, 
     template, 
     controller, 
     httpGuy; 

    beforeEach(inject(function($compile, $rootScope, $templateCache, $controller, $httpBackend) { 
     scope = $rootScope.$new(); 
     controller = $controller('ABCController', {'$scope': scope}); 
     compile = $compile; 
     template = $templateCache.get('app/index.html'); 
    })); 

it('test1', function() { 
      scope.a = SOME_VALUE; 
      scope.someFunction(scope.a); 
      // at this point scope.b changes to correct value 
      var html_template = compile(template)(scope); // this should insert the scope variables in html? 
      scope.$digest(); 
      console.log(angular.element(html_template.find('textarea')[1])); 
     }); 

試験はvalue=""すなわち空で<textarea>の出力を与えます。スコープ変数をHTMLに導入したので、値がレンダリングされているはずです。 なぜこれは起こりませんか？

Answer 1

ABCControllerの$scope.bの値が設定されていない場合、値は""（空文字列）になります。

コントローラに値を設定してみてください。単位テストでは、同じ値が<textarea>の要素に使用可能です。

Here is the sample jsfiddle for the same

template新しい、新鮮を作成ng-controller='ABCController'を有するであろうように、テストケース内部scope.a又はscope.bにいくつかの値を設定しようとした後、コンパイルDOMに新しい割り当てられた値を挿入する習慣コンパイル（スコープの異なる）コントローラのインスタンス。したがって、scopeオブジェクトに設定された値は影響を受けません。

あなたはAとBは、このようなスコープの変数であり、」説明templateからng-controllerを削除し、パターン

var compile, 
    scope, 
    controller; 

beforeEach(function() { 
    module("ABCControllerModule"); // Instantiate the 'ABCController' module 
    inject(function(_$compile_, _$rootScope_, _$controller_) { 
     scope = _$rootScope_.$new(); 
     controller = _$controller_('ABCController', {'$scope': scope}); 
     compile = _$compile_; 
    }); 
}); 

it('test1', function() { 
    scope.a = SOME_VALUE; 
    scope.someFunction = function(a) { 
     ... 
    }; 
    var html_template = compile(<template-with-out-ng-controller->)(scope); 
    console.log(angular.element(html_template.find('textarea')[1])); 
});