将数据从指令模板组件返回到全局 $scope
Returning data from directive template component to global $scope
我想要实现的是创建一个由动态填充复选框的下拉列表组成的组件。 - 完成
这些复选框应从指令元素的属性 property-name
中获取指令内值的名称。 - 完成
他们需要 return 值(选择了哪些值)到 $scope
中的一个变量,该变量的名称与属性 my-model
相同,所以我可以从主页引用 $scope.firstTitle
和 $scope.secondTitle
就像在 plunker 中一样。 - 这是我的问题
最重要的部分是该解决方案应允许在同一页面上插入多个组件,而前一个组件的 $scope
中的变量不会被下一个组件覆盖。
我尝试寻找答案,但 none 似乎解决了我的确切问题,即从一个来源向模板填充值并将值从模板传递到 $scope
。
这是我已经取得的成果的一个缩影: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>
请帮忙。
将模型放入主控制器:
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>
`
})
因为输入是对象,组件内的ng-model
指令会更新对象的内容,父控制器会看到更改。
演示
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>
我想要实现的是创建一个由动态填充复选框的下拉列表组成的组件。 - 完成
这些复选框应从指令元素的属性 property-name
中获取指令内值的名称。 - 完成
他们需要 return 值(选择了哪些值)到 $scope
中的一个变量,该变量的名称与属性 my-model
相同,所以我可以从主页引用 $scope.firstTitle
和 $scope.secondTitle
就像在 plunker 中一样。 - 这是我的问题
最重要的部分是该解决方案应允许在同一页面上插入多个组件,而前一个组件的 $scope
中的变量不会被下一个组件覆盖。
我尝试寻找答案,但 none 似乎解决了我的确切问题,即从一个来源向模板填充值并将值从模板传递到 $scope
。
这是我已经取得的成果的一个缩影: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>
请帮忙。
将模型放入主控制器:
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>
`
})
因为输入是对象,组件内的ng-model
指令会更新对象的内容,父控制器会看到更改。
演示
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>