我有一个自定义指令,在该指令中,我传递一个对象。在模板中,我有一个选择下拉列表。当我在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'
};
});