个人中心
gpt4 book ai didi

javascript - AngularJs 上的 Controller

转载 作者：行者123 更新时间：2023-12-03 06:23:22 25 4
gpt4 key购买 nike

在plunker上的下面的链接上，我正在尝试做一个简单的页面，将 View 1连接到 View 2。 在 View 1 上，我们可以键入将在 View 2 上显示的文本。
我的困难是试图理解如何将 $stateProviderState 中提到的 Controller1 连接到 Controller1.js，到 View 中。我发现很难理解如何 工厂工作，如何进行注塑。

有人能给我解释一下吗？谢谢。

Plnkr - Linking pages using ui-router 

//app.module.js

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/View1");

    $stateProvider
        .state("View1", {
            url: "/View1",
            templateUrl: "View1.html",
            view: {
              controller: 'Controller1'
            }
        })
        .state("View2", {
            url: "/View2",
            templateUrl: "View2.html",
            view: {
              controller: 'Controller2'
            }
         });
});

//Controller1.js

(function() {
  'use strict';
  angular
    .module("myApp")
    .factory('shareFactory', shareFactory)
    .controller('Controller1', Controller1);

  function Controller1(shareFactory, $scope, $http) {
    var vm = this;
    vm.textView1 = "SomethingToStartWith";

    function getView1() {
      shareFactory.getData()
        .then(function(response) {
          if (response.data) {
            vm.textView1 = response.data;
            console.log(vm.textView1);
          } else {
            console.log("Something was wrong");
            return;
          }

        }, function(response) {
          console.log("Entered this Error function");
        });
    }
  }
});

//Index.html

<!DOCTYPE html>
<html data-ng-app="myApp">

  <head>
    <script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs@1.5.5"></script>
    <script data-require="angular.js@<2" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script data-require="ui-router@1.0.0-alpha.5" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
    <script src="app.module.js"></script>
    <script src="Controller1.js"></script>
    <script src="share.factory.js"></script>
  </head>

  <body >

    <div class="header" ng-style="{background:'red'}">header</div>

      <div data-ui-view=""></div>

    <div class="footer" ng-style="{background:'blue'}">footer</div>
  </body>

</html>

//share.factory.js

(function() {
  angular
    .module("myApp")
    .factory('shareFactory', shareFactory);

  function shareFactory() {
    var data = '';

    return {
      getData: function() {
        return data;
      },
      setData: function(newData) {
        data = newData;
      }
    };
  }
})();

最佳答案

也许代码可以解释自己？

下面的代码是从你最初的 plunk 中 fork 出来的，可以在这里找到 http://plnkr.co/edit/WLe3TLTa6DKWUQ21lK3P

JavaScript

angular.module('myApp', ['ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('', 'view1');

    // set up states
    // no need to specify controllers in templates
    $stateProvider
      .state('view1', {
        url: '/view1',
        templateUrl: 'view1.html',
        controller: 'Controller1',
        controllerAs: 'vm'
      })
      .state('view2', {
        url: '/view2',
        templateUrl: 'view2.html',
        controller: 'Controller2',
        controllerAs: 'vm'
       });
  })

  // factory, shared data
  .factory('shareFactory', function($q) {
    var data = 'initial value';

    // mock $http using $q which returns
    // resolved/rejected promise, as would $http      
    return {
      getData: function() {
        return $q.when(data); // resolve
      },
      setData: function(val) {
        if (val.length > 0) {
          data = val;
          return $q.when(); // resolve
        } else {
          return $q.reject('value can\'t be empty'); // reject
        }
      }
    };
  })
  .controller('Controller1', function(shareFactory, $state) {
    var vm = this;

    // because async          
    shareFactory.getData()
      .then(function(data) {
        vm.data = data;
      });

    vm.set = function(data) {
      shareFactory.setData(data)
        .then(function() {
          vm.error = null;
          $state.go('view2');
        })
        .catch(function(e) {
          vm.error = e;
        });
    };
  })
  .controller('Controller2', function(shareFactory) {
    var vm = this;

    shareFactory.getData()
      .then(function(data) {
        vm.data = data;
      })
      .catch(function(e) {
        console.log(e);
      });
  });

index.html

<body >
  <div data-ui-view></div>
</body>

view1.html

<div>
  <h1>view1</h1>
  <label>Enter a value: </label>
  <input type="text" 
         ng-model="vm.data">
  <input type="button" 
         class="btn btn-default" 
         value="Go to view2"
         ng-click="vm.set(vm.data)">
  <pre ng-bind="vm.error"></pre>
</div>

view2.html

<div>
  <h1>view2</h1>
  The value set in view1 is: <b ng-bind="vm.data"></b>
  <input type="button"
         class="btn btn-default"
         value="Go to view1"
         ui-sref="view1">
</div>

关于javascript - AngularJs 上的 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38763396/

25 4 0
文章推荐： javascript - 下面代码中的输出是如何变成1的，谁能解释一下吗？
文章推荐： php - 无法启动可恢复的上传(HTTP 404)
文章推荐： javascript - 在一个网站中嵌入多个YouTube视频
文章推荐： javascript - 模块中的模拟导出函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com