AngularJSでパラメータを渡すことができません

Question

私のangularJSアプリケーションでは、モーダルリンクをクリックすると、名前がポップアップに表示されるようにパラメータをモーダルポップアップに渡そうとしています。モーダルリンクは、外部サービスから名前のリストを取得するカスタムディレクティブから来ています。

this tutorial to Create an Angularjs Popup Using Bootstrap UIとdocumentation for $uibModalと一緒に試してみましたが、このチュートリアルは少し古くなっています。

私はモーダルPopUpとコントローラを動作させることができますが、パラメータを渡すことはできません。

私はPlunkerに問題を再現しました。

この問題は、私はlistingsディレクティブ（script.js in Plunkerを参照）からpopupControllerに渡されたtitlenameのparamを取得することはできませんです。私は解決が正しく設定されているとは思わない。 Chromeでデバッガを設定すると、これまでのところでtitlenameの値が表示されます。

app.directive('listings', [function(){ 
    return { 
     restrict: 'E', 
     ... 
     controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) { 
      $scope.open = function (titlename) { 
       var uibModalInstance = $uibModal.open({ 
        templateUrl: 'popup.html', 
        controller: 'popupController', 
        titlename: titlename, 
        resolve: { 
         item: function(){ 
          return titlename; 
         } 
        } 
       }); 
      } 
     }] 
    }; 
}]); 

しかし、popupControllerには渡されません。以下のコードではtitlenameは値なぜこれが起こっているundefined

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance, titlename) { 
    $scope.title1 = titlename; 
    $scope.close = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
}]); 

任意のアイデアとどのように私はそれを修正することができていますか？これはAngularJSでresolveを使用する正しい方法ですか？まず

Answer 1

を追加することが必要ですので、あなたは、二重を必要としない、あなたのコントローラにtitlenameするための注入の注釈を持っていません括弧はng-clickです。二重中括弧の使用の詳細については、this投稿を参照してください。したがって、あなたのリスト指示はこのようなものでなければなりません。あなたのpopupControllerに続いて'{{item.name}}'

<a href="#" ng-click="open(item.name)">{{item.name}} -Popup</a> 

実際の文字列を渡した、あなたは解決item値を渡していませんでした。コントローラは次のようになります。

app.controller('popupController', ['$scope','$uibModalInstance', 'item', function ($scope,$uibModalInstance, titlename) { 

を

plunker

Answer 2

は、あなたがそう

ng-click="open(item.name)" 

---

第二に、あなたのテンプレートを変更するあなたのopen方法にitem.name、ない文字列リテラル'{{item.name}}'を渡したい、あなたの解決プロパティはitemという名前がありますが、期待しているように思われますtitlenameそう

resolve: { 
    titlename: function() { 
     return titlename; 
    } 
} 

---

に変更します210

そして最後に、あなたが

app.controller('popupController', ['$scope','$uibModalInstance', 'titlename', 
function ($scope,$uibModalInstance, titlename) { 
    // ... 
}]) 

---

固定Plunker〜http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9?p=preview

Answer 3

まずを参照してください、あなたのlistingsDirective.htmlで、変数に渡すために中括弧を使用しないでください。また、$scopeディレクティブにtitlename1を追加し、親スコープを子モーダルと共有することで、モーダル内の変数にアクセスできます。

app.directive('listings', [function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      data:'=', 
     }, 
     templateUrl: 'listingsDirective.html', 
     replace: true, 
     controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) { 
      $scope.open = function (titlename) { 
       $scope.titlename = titlename; 
       var uibModalInstance = $uibModal.open({ 
        templateUrl: 'popup.html', 
        controller: 'popupController', 
        scope: $scope, 
      resolve: { 
      item: function(){ 
       return $scope.titlename; 
      } 
      } 
       }); 
      } 
     }] 
    }; 
}]); 

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance) { 
    $scope.title1 = $scope.titlename; 
    $scope.close = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
}]); 

新Plunkr：http://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p=preview