私が達成したいのは、動的に生成されるチェックボックスのドロップダウンリストからなるコンポーネントを作成することです。 - DONE

これらのチェックボックスは、ディレクティブ要素の属性property-nameからディレクティブ内の値の名前をフェッチする必要があります。 - 彼らは、名前はので、私はplunkerのように$scope.firstTitleと$scope.secondTitleにメインページの参照からそれを読むことができる属性my-modelと同じである$scope内の変数に（それらの選択されている）の値を返す必要が

をDONE 。 - これは私の問題です

最も重要な点は、前のコンポーネントの$scopeの変数が次のコンポーネントによって上書きされることなく、同じページに多くのコンポーネントを挿入できることです。

私は答えを探してみましたが、1つのソースからテンプレートに値を移入し、テンプレートの値を$scopeに渡すという問題は解決していないようです。ここで

は、私はすでに達成してきたもののplunkerです：https://plnkr.co/edit/Uwarzh7qxrE3pDKxH2u8?p=preview

HTML：

<div ng-app="testModule" ng-controller="componentsController"> 

     <div class="container col-md-3"> 
     <mydropdown property-name="First Title" my-model="firstTitle"></mydropdown> 
     </div> 

     <div class="container col-md-3"> 
     <mydropdown property-name="Second Title" my-model="secondTitle"></mydropdown> 
     </div> 

     <button class="btn btn-success" type="submit" value="Save" ng-click="testSave()">Test data output</button> 
    </div>

JS：

angular.module('testModule', []) 
    .controller('componentsController', ["$scope", function ($scope) { 
     $scope.testSave = function() { 
      console.log($scope); 
     } 

    }]) 
    .directive('mydropdown', function() { 
     return { 
      scope: { 
       propertyName: '@', 
       myModel:'=' 
      }, 
      templateUrl: 'component.html', 

      link: function (scope) { 

       // this will be replaced with call to service 
       scope.dropDowns = [ 
        { 
         value: 'test1', 
         text: 'Test1' 
        }, 
        { 
         value: 'test2', 
         text: 'Test2' 
        } 
       ]; 
      } 
     } 
    });

Component.html：

<div class="dropdown"> 
    <button class="btn btn-block btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <span class="pull-left">{{propertyName}}</span> 
     <i class="pull-right glyphicon glyphicon-triangle-bottom"></i> 
    </button> 
    <ul class="dropdown-menu"> 
     <li ng-repeat="dropDown in dropDowns"> 
      <div class="checkbox col-md-12"> 
       <label> 
        <input type="checkbox" ng-model="dropDown.value"> {{dropDown.text}} 
       </label> 
      </div> 
     </li> 
    </ul> 
</div>

嘆願電子ヘルプ。

出典

2017-06-13 Mariusz Ignatowicz

'firstTitle'変数は、親コントローラによって設定された、または読み取られません。ディレクティブ内の 'myModel'変数はまったく使用されません。このコンポーネントをデータモデルに接続する試みはありませんでした。コンポーネントの接続の基本については、[AngularJS Developer Guide - コンポーネントベースのArchictecture]（https://docs.angularjs.org/guide/component#component-based-application-architecture）を参照してください。 – georgeawg

希望の結果が何かを明確にしてください。私は2つのチェックボックス付きのコンボを持っています - あなたはチェックボックスがオンになっている間に厳密に何をしたいのですか？ 'componentsController'に何か伝播したいですか？ユーザーの観点からのステップと期待される結果を提供します。今のところあなたが求めていることははっきりしていません。 – jannis

@jannisはい私はデータを$ scopeに伝えたいと思っていた。georgeawgも彼の答えで自分の意図を完全に理解した。 –

メインコントローラモデルを入れて：鋳型中の成分と

app.controller("mainCtrl", function() { 
    var vm = this; 
    vm.firstDropdowns = [ 
    { 
     value: 'test1', 
     text: 'Test1' 
    }, 
    { 
     value: 'test2', 
     text: 'Test2' 
    } 
    ]; 
})

接続：

<mydropdown my-model="vm.firstDropdowns"> 
    </mydropdown>

使用一方向&成分に結合：

app.component('mydropdown', { 
    bindings: { 
     myModel: '<', 
    }, 
    template: ` 
     <div ng-repeat="dropDown in $ctrl.myModel"> 
      <input type="checkbox" ng-model="dropDown.value" /> 
      {{dropDown.text}} 
     </div> 
    ` 
})

入力がオブジェクトなので、C内のng-modelディレクティブomponentはオブジェクトの内容を更新し、変更は親コントローラに表示されます。

DEMO

angular.module("app",[]) 
 

 
.controller("mainCtrl", function() { 
 
    var vm = this; 
 
    vm.firstDropdowns = [ 
 
    { 
 
     value: 'test1', 
 
     text: 'Test1' 
 
    }, 
 
    { 
 
     value: 'test2', 
 
     text: 'Test2' 
 
    } 
 
    ]; 
 
}) 
 

 
.component('mydropdown', { 
 
    bindings: { 
 
     myModel: '<', 
 
    }, 
 
    template: ` 
 
     <div ng-repeat="dropDown in $ctrl.myModel"> 
 
      <input type="checkbox" ng-model="dropDown.value" /> 
 
      {{dropDown.text}} 
 
     </div> 
 
    ` 
 
})

<script src="//unpkg.com/angular/angular.js"></script> 
 
    <body ng-app="app" ng-controller="mainCtrl as vm"> 
 
    <fieldset> 
 
     <mydropdown my-model="vm.firstDropdowns"> 
 
     </mydropdown> 
 
    </fieldset> 
 
    <fieldset> 
 
     <div ng-repeat="x in vm.firstDropdowns"> 
 
     {{x.value}} {{x.text}} 
 
     </div> 
 
    </fieldset> 
 
    </body>

出典

2017-06-13 21:27:56 georgeawg

私は最小限の努力のソリューションから遠く離れていなかったようだが、あなたの答えは、私が知らなかったコマンド。ありがとうございました！ –

コンポーネントは、今後Angular 2+へのスムーズな移行のために開発者を準備する方法としてAngularJS V1.5とともに導入されました。 [AngularJSガイド - V1.5への移行]（https://docs.angularjs.org/guide/migration#migrating-from-1-4-to-1-5）および[AngularJS開発者ガイド - コンポーネント]（https ：//docs.angularjs.org/guide/component）。 – georgeawg

ディレクティブテンプレートコンポーネントからグローバル$スコープにデータを返す

答えて

DEMO

ディレクティブテンプレートコンポーネントからグローバル$スコープにデータを返す

答えて

DEMO

関連する問題