Question

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

下图说明了如何重用服务someclass.js，以及为什么在一个地方尽可能多地隔离代码很重要：

我开发的代码在我的devbox上部分实现了这一点，我有posted the code to a plnkr。（感谢@shakir让这个plnkr重新创建问题。）我还包括下面的代码。

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

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

1。）someclass.prop1可以在视图中打印其值（这可以在下面的代码中使用），

2。）ng-submit的{{1}}可以直接调用confirmForm作为处理程序，从而最小化someclass.method1中的代码（这在下面的代码中会发生），但someroute.js正在运行时，未定义应包含表单数据的对象

plnkr代码：

以下是the plnkr ，其中包含对someclass.somemethod1()建议的服务的调用。当前版本可以从视图中调用@JoaozitoPolo，但表单数据不会传递给函数。所以我们需要弄清楚如何将表单数据传递给函数。

此处显示的代码也是：

（在我的devbox上）将someclass.method1()的属性和方法与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; });：

someroute.html

以下是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>，其中包含需要由someroute_start.html处理的表单：

someclass.js

为了完整起见，我包括<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>，这很简单：

someroute_first.html

和<h3>Showing first! </h3>一样简单：

someroute_second.html

该应用的主控制器是<h3>Showing second! </h3>，我在此处包含以防部分解决方案包括初始化hello.js：

someclass

为了完整性，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

同样，上述所有代码都包含在a bare minimum excerpt of code required to reproduce the problem at this plnkr中。那么需要对1进行哪些具体更改。）让plnkr工作; 2.）将表单数据传递给调用<!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>？

Answer 1

我看着你的新手更新了。优异。

只有someclass.js上的问题...你需要使用＆＃34; $ this＆＃34;内部函数的变量来访问正确的范围：

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

Answer 2

表单提交功能是否正确？

我不确定我是否会让你们休息，但如果问题是将表单数据传递给someclass.method1，我会尝试这样的事情：

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

而不是：

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

someclass.method1定义类似于

th

正确？

为什么AngularJS视图无法将数据发送到此可重复使用的服务？

2 个答案: