1

Angular ベースのフロントエンドに移行中です。とを使用することが良い解決策になる可能性があることがJavaScriptいくつかの研究でわかった後、いくつかのデータをディレクティブに渡す機能があります。しかし、私にはうまくいきません...Service$broadcast

ここに私のコードがあります:

var app = angular.module('app', []);
app.factory('broadcastService', ['$rootScope',
  function($rootScope) {
    var factory = {};
    factory.sendAjaxResut = function(name, obj) {
      console.log(' -- $broadcast ');
      $rootScope.$broadcast(name, obj);
    }
    return factory;
  }
]);

app.directive("bill", [directive]);
function directive() {
  return {
    restrict: "E",
    link: function($scope) {
      $scope.$on("b1", function(e, a) {
        console.log('-- directive')
      });
    }
  }
}

データをサービスに渡すためのコード:

function _ajaxCUSTOMER(e) {
  angular
    .injector(['ng' ,'app']) 
    .get("broadcastService")
    .sendAjaxResut("b1", e);
}

<button onclick="_ajaxCUSTOMER('foo')" >Send</button>

質問1：何がng入っていますか.injector(['ng' ,'app'])

質問 2: 現時点ではコンソールのみが表示されます-- $broadcast。ディレクティブでイベントをキャッチできない私のコードの問題は何ですか

jsfiddle

4

3 に答える 3

1

新しい $rootScope で新しいインジェクターを作成しているため、ディレクティブは $broadcast を取得していません。代わりに、アプリのインジェクターを使用してください。

function _ajaxCUSTOMER1(e) {
  var rawElem = document.getElementById("app");
  var elem = angular.element(rawElem);
  var _injector = elem.injector();
  var _broadcastService = _injector.get("broadcastService");
  _broadcastService.sendAjaxResut("b1",e);
}

この例では、アプリの要素を検索し、使用angular.elementしてそのインジェクターを取得します。

作業中のJSFiddle。

于 2016-02-05T12:47:19.080 に答える
0

でコントローラーを定義する必要がありますhtml。

jsfiddle のライブ例。

var app = angular.module('app', [])
  .controller('ExampleController', function($scope, broadcastService) {
  });
app.factory('broadcastService', ['$rootScope',
  function($rootScope) {
    var factory = {};
    factory.sendAjaxResut = function(name, obj) {
      console.log(' -- $broadcast ');
      $rootScope.$broadcast(name, obj);
    }
    return factory;
  }
]);

app.directive("bill", function($rootScope) {
  return {
    restrict: "E",
    template:'<div>My bill</div>',
    link: function($scope) {
      $rootScope.$on("b1", function(e, a) {
        console.log('-- directive',a)
      });
    }
  }
});


function _ajaxCUSTOMER1(e) {
angular.element(document).find('body').injector().get('broadcastService').sendAjaxResut('b1', e);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="app" ng-app="app">
  <div ng-controller="ExampleController">
    <button onclick="_ajaxCUSTOMER1('5')">
      Click Here to send 5
    </button>
    <bill>
    </bill>
  </div>
</body>

于 2016-02-05T11:14:36.187 に答える