我正在尝试在angular中使用指令。我试图在使用this
或var Vm = this
声明的指令内使用变量值。但是变量的值没有显示出来。
当我尝试在指令中调用变量时。当scope: {}
在指令声明下被调用时,就会发生这种情况。
我附加的控制器和指令的代码:
控制器(js代码)
(function() {
'use strict';
angular
.module('serviceApp')
.controller('ServiceCtrl', ServiceCtrl);
ServiceCtrl.$inject = ['$scope', 'serviceService'];
function ServiceCtrl($scope, serviceService) {
var Vm = this;
Vm.square = function() {
Vm.result = serviceService.square(Vm.number);
};
// $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
// $scope.igor = { name: 'Igor', address: '123 Somewhere' };
}
})();
<<p> 指令代码/strong> (function() {
'use strict';
angular
.module('serviceApp')
.directive('sampleDir', sampleDir);
function sampleDir() {
return {
restrict: 'EA',
scope: {
},
templateUrl: "views/directive-template.html"
};
}
})();
当我从控制器调用html模板下的result变量时,它显示了值。
<div ng-controller="ServiceCtrl as ser">
<label for="num">Enter the number:</label>
<input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();">
<button>x2</button>
<p>Result: {{ser.result}}</p>
<div>
<sample-dir></sample-dir>
</div>
</div>
指令模板
<p>Square of the number is <strong>{{ser.result}}</strong></p>
当您设置scope: {}
时,它创建一个isolated scope
(这意味着不能访问父作用域)并且其中没有任何项。所以你不能在controller
中访问result
。
在你的情况下,你可以使用scope: true
和你的模板,就像你做的那样,或者改变范围为这个
scope: {
result: '='
};
和模板中的
<sample-dir result='ser.result'></sample-dir>
这将是指令的模板。
<p>Square of the number is <strong>{{result}}</strong></p>
更多信息请参见此处创建自定义指令
这是scope: {}
修改后的示例angular.module('serviceApp', []).controller('ServiceCtrl', ServiceCtrl);
ServiceCtrl.$inject = ['$scope'];
function ServiceCtrl($scope) {
var Vm = this;
Vm.number = 0;
Vm.square = function () {
Vm.result = Vm.number * Vm.number;
};
// $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
// $scope.igor = { name: 'Igor', address: '123 Somewhere' };
}
angular .module('serviceApp').directive('sampleDir', sampleDir);
function sampleDir() {
return {
restrict: 'EA',
scope: {
result: '='
},
template: '<p>Square of the number is <strong>{{result}}</strong></p>'
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='serviceApp' ng-controller="ServiceCtrl as ser">
<label for="num">Enter the number: </label>
<input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();">
<button>x2</button>
<p>Result: {{ser.result}}</p>
<div>
<sample-dir result='ser.result'></sample-dir>
</div>
这是scope: true
修改后的示例 angular.module('serviceApp', []).controller('ServiceCtrl', ServiceCtrl);
ServiceCtrl.$inject = ['$scope'];
function ServiceCtrl($scope) {
var Vm = this;
Vm.number = 0;
Vm.square = function () {
Vm.result = Vm.number * Vm.number;
};
// $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
// $scope.igor = { name: 'Igor', address: '123 Somewhere' };
}
angular .module('serviceApp').directive('sampleDir', sampleDir);
function sampleDir() {
return {
restrict: 'EA',
scope: true,
template: '<p>Square of the number is <strong>{{ser.result}}</strong></p>'
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='serviceApp' ng-controller="ServiceCtrl as ser">
<label for="num">Enter the number: </label>
<input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();">
<button>x2</button>
<p>Result: {{ser.result}}</p>
<div>
<sample-dir></sample-dir>
</div>
您需要像这样在作用域中传递结果:
<<p> 指令代码/strong>(function(){
'use strict';
angular
.module('serviceApp')
.directive('sampleDir', sampleDir);
function sampleDir() {
return {
restrict: 'EA',
scope: {
result: "=" // added this line
},
templateUrl: "views/directive-template.html"
};
}
})();
<div ng-controller="ServiceCtrl as ser">
<label for="num">Enter the number: </label>
<input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();">
<button>x2</button>
<p>Result: {{ser.result}}</p>
</div>
<div>
<sample-dir result="ser.result"></sample-dir> // pass result here
</div>
指令html
<p>Square of the number is <strong>{{result}}</strong></p>