ng-model显示未定义的内部指令控制器

时间:2017-02-07 16:01:47

标签: javascript angularjs

我有一个自定义指令,在该指令中,我传递一个对象。在模板中,我有一个选择下拉列表。当我在Select中使用ng-model时,它在自定义指令控制器中显示未定义。我附上了一个控制器代码和指令代码以及这篇文章。

     **html code** 
Controller code used by main index.js
      <div ng-app="MyApp" ng-controller="MyController" data-ng-init="init()">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="panel-group">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" href="#collapse1">Project</a>
                                            </h4>
                                        </div>
                                        <div id="collapse1" class="panel-collapse collapse">
                                            <div ng-repeat="itemname in ProjectName" class="panel-body">
                                                <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow">
                                                {{itemname.Name}}
                                                <div ng-repeat="itemline in itemname.Products" ng-show="checked">
                                                    <div ng-model="template" ng-click="sample(itemline)">{{itemline.Name}}</div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="panel-group">
                                    <my-customer info="igor"></my-customer>                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


       **template:-ProductDetails.html**this is a directive HTML which will be used by ProductDetails.html.


                    <div ng-if="productData">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-2">
                                    <ul class="nav nav-pills nav-stacked" ng-repeat="val in productData.FeaturesTabs">
                                        <li ng-class="{ active: isSet($index) }">
                                            <a href ng-click="setTab($index)">{{val}}</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-10" ng-repeat="item in productData.Features">
                                    <!--<div class="jumbotron">-->
                                    <div ng-repeat="itemgrouping in productData.FeaturesTabs">
                                        <div ng-if="isSet($index)">
                                            <div ng-if="item.GUI == 1 && item.Classification == $index">
                                                <label>{{item.Name}}</label>
                                                <select id="itemname" ng-model="repeatSelect" ng-init="repeatSelect = item.Options.Name" ng-change="onenter code hereChange()" ng-options="option.Name for option in item.Options">
                                                                <option></option>
                                                            </select>
                                            </div>
                                            <div ng-if="item.GUI == 2 && item.Classification == $index">
                                                <label ng-repeat="role in item.Options">
                                                                <label>{{item.Name}}</label>
                                                <input type="checkbox" ng-model="user" checklist-value="role">{{role.Name}}
                                                </label>
                                            </div>
                                            <div ng-if="item.GUI == 3 && item.Classification == $index">
                                                <label ng-repeat="role in item.Options">
                                                                <label>{{item.Name}}</label>
                                                <input type="checkbox" checklist-model="user.roles" checklist-value="role">{{role.Name}}
                                                </label>
                                            </div>
                                            <div ng-if="item.GUI == 4 && item.Classification == $index">
                                                <label>{{item.Name}}</label>
                                                <input type="text" ng-model="itemdescription" ng-init="item.DefaultOption">
                                            </div>
                                            <div ng-if="item.GUI == 5 && item.Classification == $index">
                                                <label>{{item.Name}}</label>
                                                <h1>This is a memo text</h1>
                                            </div>
                                        </div>
                                    </div>
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </div>


                 **controller code**
    app.controller("MyController", function ($scope, myService) {


                                $scope.sample = function (val) {
                                    $scope.igor = {
                FeaturesTabs: ['cats', 'dogs'],
                Features: [{
                  GUI: 1,
                  Classification: 0,
                  Options: [{
                    Name: 'callico'
                  },
                  {
                    Name: 'tabby'
                  }]
                }, {
                  GUI: 1,
                  Classification: 1,
                  Options: [{
                    Name: 'beagle'
                  }, {
                    Name: 'collie'
                  }]
                }]
              };
                                }

            });        

                ****Directive****


                    app.directive('myCustomer', function () {
                        var controller = ['$scope', function ($scope) {
                            $scope.onChange = function () {
                                var myElement = angular.element(document.querySelector('#itemname'));
                                console.log(myElement);
                                alert($scope.repeatSelect);
                            }
                            $scope.tab = 1;

                            $scope.setTab = function (newTab) {
                                $scope.tab = newTab;
                            };
                            $scope.itemdescription = "somevalue";
                            console.log($scope.user);
                            $scope.isSet = function (tab) {
                                return $scope.tab === tab;
                            };

                        }];
                        return {
                            restrict: 'EA', //Default in 1.3+
                            //transclude: true,
                            scope: {
                                productData: '=info'
                            },
                            controller: controller,
                            templateUrl: 'ProductDetails.html'
                        };
                    });

0 个答案:

没有答案