如何在angularJS中创建可重用的组件?

时间:2014-11-19 20:26:34

标签: angularjs

我目前有两个控制器,一个是用户输入值的表单,另一个是基于api搜索呈现的图表。我需要根据第一个控制器的输入刷新或重新运行第二个控制器。我几乎可以肯定这是我的糟糕设计,但还没有找到理想的方法。

HTML code:

<html>
<body>


<!-- this is the graph generator-->
<div ng-controller="GraphAppCtrl"></div>

<!-- this is th form submittal section-->
<div ng-controller="FormCtrl" id="FormCtrl">

 <form novalidate class="simple-form">
    Name: <input type="text" ng-model="tech"/><br />

    <button ng-click="submit(tech)">Submit</button>
  </form>

</div>
</body>
</html>

Angular Code:

var app = angular.module('testApp', []);


app.controller('FormCtrl', function ($scope) {

    $scope.submit = function(tech){

   // Need to be able to call the function that generates graph and pass it the tech value

     }
}

app.controller('GraphAppCtrl', function ($scope) {

//here I do a bunch of stuff to generate graph, like http request from third party api etc.


  }

现在发生了什么,因为我在我的index.html页面中引用了图形控制器,它首次基于默认参数呈现,但我需要根据提交进行渲染。

我看过指令并在此question中试验了答案,但似乎指令更像是在控制器之间传递数据而不是我想要做的事情的解决方案。

1 个答案:

答案 0 :(得分:1)

您应该创建一个Angular服务

https://docs.angularjs.org/guide/services