AngularJS将Javascript对象传递给控制器

Question

我正在尝试将Javascript对象传递给我的AngularJS控制器并且没有运气。

我已经尝试将它传递给init函数：

<div ng-controller="GalleryController" ng-init="init(JSOBJ)">

在我的控制器方面：

$scope.init = function(_JSOBJ)
{
    $scope.externalObj = _JSOBJ;
    console.log("My Object.attribute : " + _JSOBJ.attribute );
};

虽然上述似乎不起作用。

或者，我尝试从我感兴趣的AngularJS控制器中提取属性，以便在内联<script>标记中使用：

var JSOBJ.parameter = $('[ng-controller="GalleryController"]').scope().attribute ;
console.log("My Object.parameter: " + JSOBJ.attribute );

谁能告诉我：关于这个的最佳做法是什么？

我没有选择重写普通Javascript对象，因为它是第三方库的一部分。

如果我需要进一步澄清并提前感谢任何指导，请告诉我们！

- 约翰多

Answer 1

尝试将其设置为值：

angular.module('MyApp')
    .value('JSOBJ', JSOBJ);

然后将其注入您的控制器：

angular.module('MyApp')
    .controller('GalleryController', ['JSOBJ', function (JSOBJ) { ... }]);

Answer 2

由于您的对象是第三方库的一部分，因此您必须以有角度的方式将其包装。

你的选择是：

• 如果是jquery pluging init'ed为DOM节点等，你可以创建一个directive

例

 myApp.directive('myplugin', function myPlanetDirectiveFactory()      {
   return {
     restrict: 'E',
     scope: {},
     link: function($scope, $element) { $($element).myplugin() }
   }
});

• 如果它是您需要初始化的东西，您可以使用factory或service

例

myApp.service(function() {
  var obj = window.MyLib()

  return {
    do: function() {  obj.do() }
  }
})

• 如果它是普通的javascript对象，你可以使用value

例

myApp.value('planet', { name : 'Pluto' } );

• 如果它是常量（数字，字符串等），你可以使用constant

例

myApp.constant('planetName', 'Greasy Giant');

参考此文档页面： https ： //docs.angularjs.org/guide/providers

另外，我强烈建议您阅读这个问题的答案： “如果我有jQuery背景，请在AngularJS中思考”？

Answer 3

如果您可以通过全局范围（通过窗口）访问JSOBJ ，那么您可以直接通过window访问它，就像在纯JavaScript中一样。

<script>
   ...
   window.JSOBJ = {x:1};
   ...
</script>

选项1。

<script>
  angular.module('app',[]).controller('ctrl', ['$scope', function($scope) {
    $scope.someObject = window.JSOBJ;
  }]);
</script>

但是它使控制器代码无法测试。 因此可以使用$window服务

选项2。

<script>
  angular.module('app',[]).controller('ctrl', ['$scope', '$window', function($scope, $window) {
    $scope.someObject = $window.JSOBJ;
  }]);
</script>

如果您想创建一些抽象层以使您的控制器与获取对象的源不相关，则建议定义负责获取值的服务，然后将其注入您的控制器，指令等。

选项3。

<script>
  angular.module('app',[])
    .service('myService', function() {
      var JSOBJ = ...; // get JSOBJ from anywhere: localStorage, AJAX, window, etc.
      this.getObj = function() {
        return JSOBJ;
      }
     })
    .controller('ctrl', ['$scope', 'myService', function($scope, myService) {
      $scope.someObject = myService.getObj();
    }]);
</script>

除此之外，对于简单值，您可以定义可以注入任何控制器，服务等的constant或value 。

选项4。

<script>
  angular.module('app',[]).
    value('JSOBJ', JSOBJ).
    controller('ctrl', ['$scope', 'JSOBJ', function($scope, JSOBJ) {
      $scope.someObject = JSOBJ;
    }]);
</script>