AngularJSコントローラ

UIrouterを使用してビューをネストしました。以下は私が今行っているコードですが、動作しません。私はこれがどこが間違っているのか知りたい。AngularJSコントローラ

app.js

angular.module('Myapp', ['ui.router']) 
.config(function ($stateProvider, $urlRouterProvider) { 
.state('main', { 
      url: '/main', 
      templateUrl: 'main.html', 

     }) 
    .state('main.submit', { 
     url: '/submit', 
     templateUrl: '/main-submit.html', 
     controller: 'MyController' 
    }); 
angular.module('Myapp') 
.controller('MyController', function ($scope, $http) { 
$scope.click = function() { 
    $http.get("URL") 
    .success(function (response) { 
     $scope.condition = response.Data    
    }};

main.htmlと：

<div ng-controller="MyController"> 
<a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a></div> 
<ui-view></ui-view>

メインsubmit.html：

 {{condition}}

これは、ネストされた関数を呼び出すための正しい方法です見るかどうか？誰でも手伝っていただければ幸いです。

出典

2016-05-19 Deborah

".submit"だけでなく、完全な状態を呼び出す必要があります。だからui-sref = "main.submit" –

@gruberb：それは問題を解決しませんでした。 – Deborah

-1

ng-clickを使用する代わりに、state()メソッド定義でresolve paramを使用してデータをフェッチしてください。

あなたのコントローラは、次のようになります。

app.controller('MyCtrl', function($scope){ 
    $scope.submit = function(){ 
    //do processing logic 
    $state.go('state1'); 
    }; 
});

そして、あなたの状態の定義は次のようになります。あなたは、コードが細かいコントローラが1つしかないので

.state('state1', { 
    url: '/state1', 
    views: { 
    "content": { 
    templateUrl: 'pages/state1.html', 
    controller: 'State1Ctrl', 
    resolve: { 
     state1Data: function(){return $http.get(/*whatever*/);} 
    } 
    } 
    } 
})

出典

2016-05-19 05:17:12 Venkat

Bt main.htmlに投稿するには、クリックオプションが必要です。 Thinkの問題を解決する解決策を考えてください。ここで解決方法を知りたい – Deborah

ボタンを使い、 'ng-click'で' $ state.go'を使って新しい状態に遷移します。 – Venkat

解決されたstate1Dataは何ですか？ – Deborah

-1

。私はあなたがangular.module（ 'yapp'）に気づいたと思います。これはangular.module（ 'Myapp'）でなければなりません。

もう1つコントローラを親状態に宣言すると、よりトリッキーなことが起こります。子コントローラから親コントローラ内のすべての機能にアクセスできます。しかし、親は子コントローラ内で宣言された関数や変数にアクセスすることはできません。私はあなたの要件ごとに作業例を書かれている

出典

2016-05-19 05:41:00

それは私のコードを編集したタイプミスです。私はここで解決を使うべきですか？有益なコメントであり、-1は私のものではありません。 – Deborah

ありがとうDeborah。 –

、

index.htmlを、それを試してみてください。

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
     <script> 
      angular.module('Myapp', ['ui.router']) 
       .config(function ($stateProvider, $urlRouterProvider) { 

        $urlRouterProvider.otherwise('/main'); 

        $stateProvider 
         .state('main', { 
          url: '/main', 
          templateUrl: 'main.html' 
         }) 
         .state('main.submit', { 
          url: '/submit', 
          templateUrl: 'main-submit.html', 
          controller: 'MyController' 
         }); 
       }) 
       .controller('MyController', function ($scope, $http) { 
        $scope.click = function() { 
         $scope.condition = 'Condition!!!!!!!!'; 
        }; 
       }); 
     </script> 
    </head> 
    <body ng-app="Myapp"> 
     <div ui-view></div> 
    </body> 
</html>

main.htmlと：

Home Page YaHoo!!!!!! 
<div ng-controller="MyController"> 
    <a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a> 
    <div ui-view></div> 
</div>

メインsubmit.html：

{{condition}}

あなたの問題を解決してください。

乾杯！

出典

2016-05-19 06:21:49

あなたが与えたコードは、今私が持っているものです。主な問題は$ http.get（）です。 main.htmlのsubmitをクリックすると、私はどのようにしてurlからデータを取得し、main-submit.htmlに送ることができますか？ – Deborah

$ http.get（）サービスは、すでに使用していて正しく動作するはずのデータを取得するために使用されます。また、 ".submit"は "main"状態のサブ状態であるため、mainのスコープの値がどんな値であっても、サブ状態のテンプレートによって直接使用できます。そして、これは私が追加した上記のコードで起こっていることです。 –

html.submitのコントローラ割り当てを削除することを考えましたか？
あなたはすでにあなたが同じコントローラを持つテンプレートであり、両方の状態を処理しています。

出典

2016-05-19 10:18:17 AranS

これは静的データで処理されていますが、URLから{{condition}}が表示されていません。 – Deborah

答えて

関連する問題