3

jqLit​​e 関数 element.html をウォッチャーのリスナーとして直接渡そうとしています。

angular.module('testApp', []).directive('test', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch('someVariable', element.html); // <-- Passing the function handle as listener
    }
  };
});

ただし、これは何らかの理由で機能しないため、回避策としてリスナーを関数でラップしました。

angular.module('testApp', []).directive('test', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch('someVariable', function (newValue) {
        element.html(newValue);
      });
    }
  };
});

この 2 番目の例は機能します。

最初の例が壊れている理由がわかりません。何か案は？

編集: 言及するのを忘れていましたが、ブラウザはエラーを表示しません。空の要素が表示されるだけです。

4

2 に答える 2

1

this実際には、関数のプロパティを自動的に変更する角度のインジェクターが原因です。これを考慮してください。

var test = function(string) {
    return {
        html: function(value) {
            console.log(this);
        }
    }
}

$scope.$watch('my_watch_expression', test('string').html);

の値を確認すると、次のthisようになります。

ここに画像の説明を入力

ご覧のとおり、jQueryライブラリでエラーがスローされます。

ここに画像の説明を入力

thisには関数がないemptyため、サイレント例外がスローされ、期待どおりに動作しません。

于 2014-11-12T19:15:28.310 に答える
-1

公式ドキュメントでは、https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$watch

$watch の 2 番目のパラメーターはリスナーです

"The listener is called only when the value ..."

論理的に、リスナーが「呼び出される」場合、それは関数でなければなりません...または、ここで間違っているかもしれません。

あなたがするとき：

link: function (scope, element, attrs) {
  scope.$watch('someVariable', element.html); // <-- Passing the function handle as listener
}

リンク関数で渡された要素を見て、.html 属性にアクセスしようとします。関数である可能性がありますが、文字列を返します...したがって、正常に実行されますが、同等のものが次のようになるため、ログは記録されません。

scope.$watch('someVariable', "<div> some content </div>");

これは何もしませんが、エラーは発生しません。

そして、あなたがしたようにそれを関数にラップすれば、それで何かをすることができます.

于 2014-11-12T18:20:40.917 に答える