Question

我可以使用ng-model在多个视图上构建对象吗？

例如，在view1中说我有

        public  string Username = Console.ReadLine();
    public  string Password = Console.ReadLine();
    public const string ForumUrl = "forum.smurfbot.net";

    static void Main(string[] args)
    {

    }

    public string MakePostRequest(string url = "www.website.com/usercp.php", string postData = "username=" + Username + "&password=" + Password + "&remember=yes&submit=Login&action=do_login&url=" + ForumUrl + "member.php?action=login")
    {
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
        request.KeepAlive = true;
        request.Method = "POST";
        request.ContentType = "application/x-www-form-urlencoded";
        request.AllowAutoRedirect = true;

        byte[] postBytes = Encoding.ASCII.GetBytes(postData);
        request.ContentLength = postBytes.Length;
        Stream requestStream = request.GetRequestStream();
        requestStream.Write(postBytes, 0, postBytes.Length);
        requestStream.Close();

        HttpWebResponse response = (HttpWebResponse)request.GetResponse();
        StreamReader sr = new StreamReader(response.GetResponseStream());
        string sReturn = sr.ReadToEnd();
        sr.Dispose();

        return sReturn;
    }

在view2中我有

<input ng-model='myObject.firstName'>

在view3中我有

<input ng-model='myObject.lastName'>

您可以在最后一个视图中点击提交按钮，然后将对象返回到某处。

我最初的方法是使用一个声明空对象的服务，然后在服务中使用允许控制器使用该服务将其视图输入添加到该对象的函数，然后返回该对象。

然而，我觉得这是一个相当迂回的做法！

如果有人能指出我正确的方向，我会非常感激。

Answer 1

您可以使用服务。这里有一个示例，其中3个控制器使用3个指令ng-model共享同一个对象。每个控制器都会修改tested.value属性，但您当然可以使用不同的属性。

＆＃13;

angular.module('test', []).factory('tested', function() {
  return {
     value : '123'  
  };
}).controller('ctrl1', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl2', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl3', function($scope, tested) {
  $scope.tested = tested;  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="ctrl1">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl2">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl3">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
</div>

＆＃13;

Answer 2

由于每个视图都有自己的控制器，因此共享数据的唯一方法是使用“提供者”，“服务”或“工厂”类型的服务。

然后，您可以使用您谈到的方法从每个控制器修改对象。

最后，为了通知每个视图发生了变化，服务方法可能会从服务中引发一个事件：

$rootScope.$broadcast('somethingChanged', myObject);

每个控制器都可以听：

$scope.$on('somethingChanged', function(data) { 
});

几种观点下的角度ng模型

2 个答案: