1
Я пытаюсь узнать, как работает изолированный scope, bindToController и controllerAs.Использование bindToController без шаблона
Если я директиву с изолированной сферы и шаблона, он работает, как ожидалось:
<!DOCTYPE html>
<html ng-app="app">
<head>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
function directiveTest() {
function CtrlTest() {
this.foo = "honk";
this.clearFoo = function() {
this.foo='';
};
}
return {
restrict : 'E',
scope: {
label : '@',
lg : '@'
},
bindToController : true,
controller: CtrlTest,
controllerAs: 'ctrlTest',
template: '<label>\n {{ ctrlTest.label }}\n <input type="text" ng-model="ctrlTest.foo"/>\n</label>\n<button ng-click="ctrlTest.clearFoo()">Clear</button>\n\n<div>{{ ctrlTest.foo }}</div>\n\n<div ng-show="ctrlTest.foo.length> ctrlTest.lg">\n Long string !\n</div>\n'
};
}
var app = angular.module('app',[]);
app.directive('dirTest',[directiveTest]);
</script>
</head>
<body>
<dir-test label="Type something now:" lg="7">
</dir-test>
</body>
</html>
Я пытался сделать то же самое без шаблона, но я не могу заставить его работать:
<!DOCTYPE html>
<html ng-app="app">
<head>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
function directiveTest() {
function CtrlTest() {
this.foo = "honk";
this.clearFoo = function() {
this.foo='';
};
}
return {
restrict : 'E',
scope: {
},
bindToController : true,
controller: CtrlTest,
controllerAs: 'ctrlTest'
};
}
var app = angular.module('app',[]);
app.directive('dirTest',[directiveTest]);
</script>
</head>
<body>
<dir-test>
<label>
Type something again :
<input type="text" ng-model="ctrlTest.foo"/>
</label>
<button ng-click="ctrlTest.clearFoo()">Clear</button>
<div>{{ ctrlTest.foo }}</div>
<div ng-show="ctrlTest.foo.length>7">
Long string !
</div>
</dir-test>
</body>
</html>
Однако это работает, если я устанавливаю область действия в true вместо изолированной области.
Может кто-нибудь объяснить мне, как сделать второй пример работы, или, если это невозможно, почему?
Это просто как изолированный работает сфера. Содержимое внутри тегов не получает возможности для директивы dirTest. Только содержимое в вашем шаблоне получает область действия из директивы. Любая причина, по которой вы не хотите использовать шаблон? –
rob
Я хотел знать, есть ли способ сделать директиву, где контент может слегка измениться. Вероятно, в этом случае нет смысла создавать область изоляции. Я просто экспериментирую и участвую. –