在AngularJS中,如何在一个控制器中创建一个函数来更改另一个控制器中的变量?

时间:2016-11-02 20:23:25

标签: javascript html angularjs bootstrap-modal

我一直在尝试使用this示例,从一个控制器调用一个函数到另一个控制器。到目前为止,我的尝试都没有奏效。我目前在控制器ModalViewController中有一个带有按钮的模态视图。这个html出现了:

<script type="text/ng-template" id="renderedContent.html">
    <div class="modal-header">
        <h3>Detailed View</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="data in storage">
                <button style="border-radius:5px;color:white;background-color:#777777;border:none;margin:1px;" ng-click="myFunction(data)">
                   <h5 style="font-size:10px;padding:0px;margin:0px;">{{data}}</h5>
                </button>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
</script>

方法myFunction()应该在另一个控制器的范围内设置一个值。特别是,我在控制器InputController中有一个输入字段,基本上是:

<input type="text" ng-model="inputText"></input>

我正在尝试编写一个函数,以便我可以使用:

//in ModalViewController
$scope.myFunction = function(data){
    // call InputController
    // set InputController.inputText = data;
}

我并不完全理解给定链接中的代码。我该如何编写这个函数,以便它能够完成我想要做的事情?

1 个答案:

答案 0 :(得分:0)

您的问题的主题正是服务和工厂服务的目的......在控制器之间共享方法(函数)和变量。您不能直接从另一个控制器调用控制器。这违反了单一目的规则。您使用服务来促进此通信。

创建服务非常简单:

angular.module('myApp').service('MyService', Myservice);
function MyService() {
  var MyService = this;

  MyService.someVariable = "A";

  MyService.setSomeVariable = function(value) {
    MyService.someVariable = value;
    console.log(Myservice.someVariable);
  };
}

也很容易注入你的控制器:

angular.module('myApp').controller('MyController', MyController);
MyController.$inject = ['MyService', '$scope'];
function MyController(Myservice, $scope) {
  MyService.setSomeVariable("B"); // prints "B"
});

angular.module('myApp').controller('MyOtherController', MyOtherController);
MyOtherController.$inject = ['MyService', '$scope'];
function MyController(Myservice, $scope) {
  MyService.setSomeVariable("C");  //prints "C"
});

该服务是 singleton ,这意味着它仅在应用程序的生命周期内实例化一次。