0

我的任务是创建一个表单并在点击'提交'后将输入的数据显示在div上。该任务涉及创建两个指令,一个用于创建表单,另一个用于显示输入的数据。应使用'服务'连接这两个指令,以与两个指令对应的两个控制器进行通信。但是,我创建了两个指令,但在脚本文件中,我遇到了一些问题。请帮忙。服务不能正常工作 - AngularJS

这里是plunker链接:HERE

$scope.getFaster = function() { $scope.name = $scope.modelName; $scope.age = $scope.modelAge; $scope.place = $scope.modelPlace; $scope.gender = $scope.modelGender; };

有些事情不对的fasterBack.js文件

+0

你的做法是将wrong.angular控制器值在你的圆顶前$ scope.name绑定='XYZ “;在您的html 中,您可以使用相同的范围

{{name}}

回答

0

更新:

更新Plunker:http://plnkr.co/edit/bsFxDn3RQCGlmZLJMAil?p=preview

我已经它可以在没有服务的情况下工作,这两个例子都是重要的。他们只在提交按钮上工作。

更新结束

与工作液更新plunker。我没有使用过这个服务。但是,如果您想为更复杂的目的使用服务,请告诉我,我会更新重新启动的服务器。 然而,为了澄清你,你必须使用两个控制器和一个服务而不是指令。

我在这里完成的工作只是将这两个指令包装在您创建的控制器中,并对指令进行了较小的修改(添加替换以移除显示指令中的自定义元素和更改的模型名称以使其相同作为形式指令)。

的index.html

<div ng-controller="fasterCtrl"> 
    <faster-form></faster-form> 
    <faster-display></faster-display> 
</div> 

fasterDisplay.html

<div> 
    <div>Name : {{modelName}} </div><br> 
    <div>Age : {{modelAge}}</div><br> 
    <div>Place : {{modelPlace}}</div><br> 
    <div>Gender : {{modelGender}}</div><br> 
</div> 

http://plnkr.co/edit/y3jpxLis9PENGrRvW4Od?p=preview

+0

欣赏努力。但是,我试图得到的不仅仅是使用ng-model更新显示,而是我希望仅在按下提交按钮后才能显示详细信息。猜你明白我的问题。 – Anand

+0

使用和不使用服务进行更新,他们都在工作并仅在提交时显示数据。 http://plnkr.co/edit/bsFxDn3RQCGlmZLJMAil?p=preview – TheRodeo