Question

我有一个简单的文本框和一个按钮，每当用户点击按钮时，警报会显示文本框的文本，但我想这样做（我知道有很多更好的方法，但首先我想了解为什么这样做方式不起作用）：

var app = angular.module('app', []);
app.factory('Service', function() {
    var service = {
            add: add
        };
        return service;
        function add($scope) {
            alert($scope.user.username);
        }
});
app.controller('table', function(Service,$scope) {
    //get the return data from getData funtion in factory
    this.add = Service.add($scope);

});

如您所见，我将范围发送到工厂，并将user.username定义如下：

    <button class="btn btn-primary" ng-click="t.add(user.userName)">

但是当我运行时，没有任何事情可以告诉我这段代码有什么问题吗？

<body ng-app="app">
<form>
    <div class="row commonRow" ng-controller="table as t">
        <div class="col-xs-1 text-right">item:</div>
        <div class="col-lg-6 text-right">
            <input id="txt" type="text" style="width: 100%;"
                ng-model="user.userName">
        </div>

        <div class="col-xs-2">
            <button class="btn btn-primary" ng-click="t.add(user.userName)">
                click me</button>
        </div>
    </div>
</form>

plnk链接如下：

plnkr

Answer 1

问题出在这一行

this.add = Service.add($scope);

您可以在此处将undefined调用的返回值（Service.add($scope)）分配给this.add。

正确的方法是

this.add = function(data) { Service.add($scope); }

或

this.add = Service.add;

// in the service factory.
function add(usrNm) {
    alert(usrNm);
}

Answer 2

第一件事是你不能在服务中使用$ scope。在控制器中你不能将此（对象）用于$ scope.so $ scope不包含任何值。我想你这样写 $ scope.user = this;

无法正确获取范围变量

2 个答案: