Javascript 为什么可以'；t AngularJS视图是否将数据发送到此可重用服务？

AngularJS应用程序需要重复使用多个自定义对象。我担心创建难以维护的杂乱、冗余代码，因此我将可重用代码移动到一个服务中，该服务可以为每个视图简洁地注入控制器中，然后直接从每个html视图调用，而不会使控制器因冗余代码而混乱

下图说明了如何重用服务

someclass.js

，以及为什么在一个地方尽可能多地隔离其代码很重要：

我已经开发了一些代码，在我的devbox上部分实现了这一点。（感谢@shakir让这个plnkr重现问题。）我还包括下面的代码

尽管单击表单提交按钮确实会导致调用服务中的表单处理程序方法，但问题是，应该包含表单数据的对象在应该处理表单数据的someclass.method1（）方法中未定义需要对下面的代码进行哪些特定更改，以便用户从表单提交的数据的值可以在服务的表单处理方法中进行操作？

视图和服务（通过控制器）之间通信的完整要求如下：

1。）

someclass.prop1可以在视图中打印它的值（这在下面的代码中起作用），并且

confirmForm
的
ng submit
可以直接调用
someclass.method1
作为处理程序，从而最小化
someroute.js
中的代码（这发生在下面的代码中，但是当运行
someclass.somemethod1（）
时，不定义应该包含表单数据的对象）


plnkr代码：


下面是对
@JoaozitoPolo
建议的服务的调用。当前版本能够从视图中调用
someclass.method1（）
，但表单数据不会传递到函数中。因此，我们需要弄清楚如何将表单数据传递到函数中


此处也显示代码：


（在我的devbox上）将
someview.html
的属性和方法与
someclass.js
连接起来的代码（但在函数调用期间不会将表单中的数据发送到
someclass.js
）包括如下：

以下是
someclass.js
的代码：

angular
.module('someclass', ['ngCookies'])
.service('someclass', ['$rootScope', '$http', '$cookies', function($rootScope, $http, $cookies){

this.prop1 = $cookies.get('test1');
this.prop2 = 'nothing';
this.resultphone = {};

this.method1 = function(isValid, resultphone) {
    if(isValid){
        var funcJSON = resultphone;
        funcJSON.wleadid = '1';//resultphone is undefined in debugger here
        alert("just a filler to add breakpoint for debugger");
        $http.post('/some-test-service', funcJSON).then(
            function(response) {
                prop2 = response.data.content;
            }
        );
    }
};

}]);

以下是
someroute.js
的代码：

angular
.module('someroute', ['someclass'])
.controller('someroute', function($scope, someclass) {

    $scope.someclass = someclass;

});

someclass.prop1 is: {{someclass.prop1}} <br>
someclass.prop2 is: {{someclass.prop2}} <br>
<div ng-show="someclass.prop1!='yes'">
    <h1>someclass prop1!</h1>
    <div ng-include="'someroute_start.html'"></div>
</div>
<div ng-show="someclass.prop1=='yes'">

    <div ng-show="someclass.prop2=='showfirst'">
        <h1>Include start.</h1>
        <div ng-include="'someroute_first.html'"></div>
    </div>

    <div ng-show="someclass.prop2=='showsecond'">
        <h2>Include second.</h2>
        <div ng-include="'someroute_second.html'"></div>
    </div>

</div>

    <form name="confirmForm" ng-submit="someclass.method1(confirmForm.$valid)" novalidate>
        Enter some value: 
        <input type="text" name="phonenum1" ng-model="resultphone.phonenum1" required />
        <button type="submit" ng-disabled="confirmForm.$invalid" >Submit</button>
    </form>

angular
    .module('hello', [ 'ngRoute', 'someclass', 'home', 'someroute', 'navigation' ])
    .config(

            function($routeProvider, $httpProvider, $locationProvider) {

                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    templateUrl : 'home.html',
                    controller : 'home'
                })
                .when('/someroute', {
                    templateUrl : 'someroute.html',
                    controller : 'someroute'
                }).otherwise('/');

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            }
    )

下面是
someroute.html
：

angular
.module('someroute', ['someclass'])
.controller('someroute', function($scope, someclass) {

    $scope.someclass = someclass;

});

someclass.prop1 is: {{someclass.prop1}} <br>
someclass.prop2 is: {{someclass.prop2}} <br>
<div ng-show="someclass.prop1!='yes'">
    <h1>someclass prop1!</h1>
    <div ng-include="'someroute_start.html'"></div>
</div>
<div ng-show="someclass.prop1=='yes'">

    <div ng-show="someclass.prop2=='showfirst'">
        <h1>Include start.</h1>
        <div ng-include="'someroute_first.html'"></div>
    </div>

    <div ng-show="someclass.prop2=='showsecond'">
        <h2>Include second.</h2>
        <div ng-include="'someroute_second.html'"></div>
    </div>

</div>

    <form name="confirmForm" ng-submit="someclass.method1(confirmForm.$valid)" novalidate>
        Enter some value: 
        <input type="text" name="phonenum1" ng-model="resultphone.phonenum1" required />
        <button type="submit" ng-disabled="confirmForm.$invalid" >Submit</button>
    </form>

angular
    .module('hello', [ 'ngRoute', 'someclass', 'home', 'someroute', 'navigation' ])
    .config(

            function($routeProvider, $httpProvider, $locationProvider) {

                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    templateUrl : 'home.html',
                    controller : 'home'
                })
                .when('/someroute', {
                    templateUrl : 'someroute.html',
                    controller : 'someroute'
                }).otherwise('/');

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            }
    )

为了完整起见，我加入了
someroute\u first.html
，它非常简单：

<h3>Showing first! </h3>

<h3>Showing second! </h3>

应用程序的主控制器是
hello.js
，我在这里包括它，以防部分解决方案包括初始化
someclass
：

angular
.module('someroute', ['someclass'])
.controller('someroute', function($scope, someclass) {

    $scope.someclass = someclass;

});

someclass.prop1 is: {{someclass.prop1}} <br>
someclass.prop2 is: {{someclass.prop2}} <br>
<div ng-show="someclass.prop1!='yes'">
    <h1>someclass prop1!</h1>
    <div ng-include="'someroute_start.html'"></div>
</div>
<div ng-show="someclass.prop1=='yes'">

    <div ng-show="someclass.prop2=='showfirst'">
        <h1>Include start.</h1>
        <div ng-include="'someroute_first.html'"></div>
    </div>

    <div ng-show="someclass.prop2=='showsecond'">
        <h2>Include second.</h2>
        <div ng-include="'someroute_second.html'"></div>
    </div>

</div>

    <form name="confirmForm" ng-submit="someclass.method1(confirmForm.$valid)" novalidate>
        Enter some value: 
        <input type="text" name="phonenum1" ng-model="resultphone.phonenum1" required />
        <button type="submit" ng-disabled="confirmForm.$invalid" >Submit</button>
    </form>

angular
    .module('hello', [ 'ngRoute', 'someclass', 'home', 'someroute', 'navigation' ])
    .config(

            function($routeProvider, $httpProvider, $locationProvider) {

                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    templateUrl : 'home.html',
                    controller : 'home'
                })
                .when('/someroute', {
                    templateUrl : 'someroute.html',
                    controller : 'someroute'
                }).otherwise('/');

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            }
    )

为确保完整性，
index.html
按如下方式加载模块：

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

    <link href="style.css" rel="stylesheet"/>
    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
    </style>
  </head>

  <body class="ng-cloak" ng-cloak="" ng-app="hello">
    <div class="container" ng-controller="navigation">
      <ul role="tablist" class="nav nav-pills">
        <li ng-class="{active:tab('home')}">
          <a href="#/">home</a>
        </li>
        <li ng-class="{active:tab('someroute')}">
          <a href="#/someroute">some route</a>
        </li>
      </ul>
    </div>
    <div class="container" ng-view=""></div>

    <script type="text/javascript" src="someclass.js"></script>
    <script type="text/javascript" src="home.js"></script>
    <script type="text/javascript" src="someroute.js"></script>
    <script type="text/javascript" src="navigation.js"></script>
    <script type="text/javascript" src="hello.js"></script>
  </body>
</html>


文件。写（“”）；
[ng \：斗篷]，[ng斗篷]，.ng斗篷{显示：无！重要；}







同样，上述所有代码都包含在中那么需要对1.）使plnkr工作，2.）将表单数据传递到调用
someclass.method1（）
？
表单提交函数正确吗

我不确定是否让你们休息，但如果问题是将表单数据传递给someclass.method1，我会尝试以下方法：

ng-submit="someclass.method1(confirmForm.$valid,someclass.resultphone)"

与此相反：

ng-submit="someclass.method1(confirmForm.$valid)"

someclass.method1定义如下所示

this.method1 = function(isValid, resultphone) {...}

对吗？
我看你的衣服更新了。好极了

只是someclass.js上的一个问题。。。您需要在内部函数中使用“$this”变量来访问正确的范围：

$http.post('/some-test-service', funcJSON).then(
    function(response) {
        $this.prop2 = response.data.content;
    }
);

应该是
@shakib谢谢，但是更改那行代码并不能解决问题
resultphone
和
funcJSON
在
someclass.method1（）
中未定义，并且在eclipse调试器给出行
funcJSON.wleadd='1'后，程序将停止运行在该方法中。也许如果我们能让plnkr工作起来，调试可能会更容易。在firefox中运行在my devbox上的版本按照您的建议在本评论中所述工作。还有其他想法吗？添加了
ngCookies
模块脚本参考，并在
someclass.js
中更改了cookies代码。运行plunkr@shakib，您还添加了
var$this=this，这是解决方案的关键部分。考虑到这一点，这里有一个修改后的plunk：您的代码会导致视图中
prop2
的值更新，使其等于
showfirst
，但视图不会以任何其他方式更新，这意味着表单仍然可见，并且包含文件不会更改。为了启用工作示例的最后一部分，我应该做哪些更改？我将把它标记为已接受和+1，因为您回答了如何将数据从视图中获取到服务中的问题。但是，我提出了一个不同的问题，关于如何从类似的服务中获取数据以刷新视图。您对此问题的回答不会导致视图更新，并且此OP中的代码不允许数据真正更新，因为此OP依赖于断开连接的后端服务。你愿意对另一个问题发表评论吗？这里是链接：我将评论另一个问题。