Question

这是我的情况：我已经在我已经创建的应用程序中有一个Javascript对象看起来像这样......

var foo = foo || {};
foo.name = "";
foo.gender = "";

foo.loadUser = function() {
    // Some other stuff here
    foo.name = "Joe";
    foo.gender = "Fella";

    $("#welcome).text("Hello " + foo.name + " you sure are a swell " + foo.gender + "!");    
}

现在，我已经决定不喜欢我的逻辑和表示混合，所以我想删除那行jquery，只需让angular.js用一些简单的数据绑定为我更新文本。所以我加载了angular.js并添加了这条小线..

<div ng-app>
<div id="welcome" ng-controller="foo">Hello {{foo.name}}! 
     You sure are a swell {{foo.gender}}!</div>

问题在于，在执行此操作时，我得到的错误是......

错误：参数'foo'不是函数，得到了对象

查看angular.js入门示例，看起来我可能需要返回并以...格式重写我的整个foo对象（以及我的所有其他代码）。

function foo($scope) {
  $scope.name = '';
  $scope.gender = '';

  $scope.loadUser = function() {
    //Other stuff here
    $scope.name = "Joe";
    $scope.gender = "Fella"            
  }

}

...这可能有用（我还没有尝试过），但我不确定是否要重写所有代码以适应这种新格式。我有更多的对象而不仅仅是foo，而在现实生活中，foo中有更多的东西。（哎呀，我甚至不称它为“foo”！）

有没有什么方法可以让数据绑定工作而不会将所有对象重写为函数？

Answer 1

不确定这是否是您正在寻找的，但您仍然可以使用您的foo对象，因为它们位于Angular控制器中，如下所示：

function Controller($scope){
    $scope.foo = foo;
    foo.loadUser();
}

有关示例，请参阅this fiddle。您可能还希望将对象移动到service或工厂，如this article第2课所述。

Answer 2

这似乎很明显，但您尝试了ng-controller="foo.loadUser"

标记

<div id="welcome" ng-controller="foo.loadUser">Hello {{foo.name}}! 
     You sure are a swell {{foo.gender}}!</div>

角

foo.loadUser = function($scope) {
    // Some other stuff here
    foo.name = "Joe";
    foo.gender = "Fella";

    $scope.foo = foo;
}

只要函数接收到$ scope并且对该值执行所有angularjs魔术，您就不必更改现有对象。

我可以将angular.js与对象一起使用，而不是函数吗？

2 个答案: