如果我的 Angular 控制器没有使用任何 $scope,那么我该如何在我的指令中进行 2 路数据绑定
If my Angular Controller is not using any $scope, then how do i do 2 way data binding in my directive
我一直在使用 Angular 而没有 $scope
控制器:
angular
.module('app')
.controller('requestController', requestController);
requestController.$inject = ['$location','requestService'];
function requestController($location, requestService) {
var vm = this;
//......
var detail = {};
detail.program.....
}
HTML页面显示值
{{detail.program.code}} shows DGAT on page ... thus it has value
将其传递到指令中
<com-code progCode="detail.program.code"></com-code>
应该将值作为双向绑定的指令
(function () {
var injectParams = ['customerService', '$sce'];
var comCode = function (customerService, $sce) {
return {
replace: true,
restrict: "E",
scope: {
progCode: "="
},
link: function (scope, element, attrs) {
console.log('scope.progCode',scope.progCode); // UNDEFINED
}
};
};
comCode.$inject = injectParams;
angular.module('app').directive('comCode', comCode)
}());
- 为什么是这个
undefined
?
- 是因为控制器中缺少
$scope
吗?
progCode
as 2 way data binding 是否成为指令范围的一部分?
在 HTML 中使用指令时,属性应 破折号分隔 。所以,
<com-code prog-code="detail.program.code"></com-code>
应该可以工作(假设其他一切都准备就绪)!
因为你没有在控制器中添加,所以在 $scope
中设置你的详细信息
$scope.detail = detail;
但是在指令中从 $scope 获取数据 - 是 bag 实践
您缺少控制器,语法见此 PLUNKR
<div ng-controller="MainCtrl as main">
<h4>valBit: {{main.data.valBit}}</h4>
<my-code input-code="main.data.valBit"></my-code>
<p ng-if="main.data.valBit == 1">
part of my form, with ngmessage etc... $erroretc...
</p>
</div>
当您不使用作用域时,您需要在控制器中使用 this
进行绑定,并在路由中使用 controller as
语法,或者 html 然后使用该引用来调用值
您将 controllerAs 与 vm 变量一起使用,但在这里您没有将 detail 变量绑定到您的 vm 中。所以你不能将细节传递给你的指令。
为此,将详细信息绑定到您的 view/model (vm) 变量:
vm.detail = detail;
进入视图将 vm.detail 绑定到您的指令:
<com-code progCode="vm.detail.program.code"></com-code>
我一直在使用 Angular 而没有 $scope
控制器:
angular
.module('app')
.controller('requestController', requestController);
requestController.$inject = ['$location','requestService'];
function requestController($location, requestService) {
var vm = this;
//......
var detail = {};
detail.program.....
}
HTML页面显示值
{{detail.program.code}} shows DGAT on page ... thus it has value
将其传递到指令中
<com-code progCode="detail.program.code"></com-code>
应该将值作为双向绑定的指令
(function () {
var injectParams = ['customerService', '$sce'];
var comCode = function (customerService, $sce) {
return {
replace: true,
restrict: "E",
scope: {
progCode: "="
},
link: function (scope, element, attrs) {
console.log('scope.progCode',scope.progCode); // UNDEFINED
}
};
};
comCode.$inject = injectParams;
angular.module('app').directive('comCode', comCode)
}());
- 为什么是这个
undefined
? - 是因为控制器中缺少
$scope
吗? progCode
as 2 way data binding 是否成为指令范围的一部分?
在 HTML 中使用指令时,属性应 破折号分隔 。所以,
<com-code prog-code="detail.program.code"></com-code>
应该可以工作(假设其他一切都准备就绪)!
因为你没有在控制器中添加,所以在 $scope
中设置你的详细信息$scope.detail = detail;
但是在指令中从 $scope 获取数据 - 是 bag 实践
您缺少控制器,语法见此 PLUNKR
<div ng-controller="MainCtrl as main">
<h4>valBit: {{main.data.valBit}}</h4>
<my-code input-code="main.data.valBit"></my-code>
<p ng-if="main.data.valBit == 1">
part of my form, with ngmessage etc... $erroretc...
</p>
</div>
当您不使用作用域时,您需要在控制器中使用 this
进行绑定,并在路由中使用 controller as
语法,或者 html 然后使用该引用来调用值
您将 controllerAs 与 vm 变量一起使用,但在这里您没有将 detail 变量绑定到您的 vm 中。所以你不能将细节传递给你的指令。
为此,将详细信息绑定到您的 view/model (vm) 变量:
vm.detail = detail;
进入视图将 vm.detail 绑定到您的指令:
<com-code progCode="vm.detail.program.code"></com-code>