- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
HTML部分
<index></index>
指令
angular.module('todoWithAngularApp').directive('index', function () {
return {
restrict: 'E',
templateUrl: '/scripts/template/index.html',
replace: true,
link: function (scope, iElement, iAttrs) {
console.log(scope);
console.log(iElement);
console.log(iAttrs);
iElement.on('click', '#addTaskClass', function(event) {
scope.addTaskClassBoxDisplay = true;
console.log(scope.addTaskClassBoxDisplay);
})
}
};
控制器
angular.module('todoWithAngularApp').controller('IndexCtrl', function ($scope) {
$scope.addTaskClassBoxDisplay = false;
});
怎样才能让指令去修改控制器上的$scope的属性
阿神2017-05-15 16:55:35
Irresponsable et non vérifié, voici quelques idées :
1. Placez addTaskClassBoxDisplay sous l'objet, tel que
scope.obj.addTaskClassBoxDisplay = true
2. Utilisez les messages
3. Utiliser le service
Les trois méthodes ci-dessus sont également des moyens courants de partager des données entre modules Angular et peuvent être adaptées à différents scénarios.
曾经蜡笔没有小新2017-05-15 16:55:35
http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.js"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = true;
});
app.directive('myDirective', function ($compile) {
return {
restrict: 'AE', //attribute or element
scope: {
myDirectiveVar: '=',
//bindAttr: '='
},
template: '<button>' +
'click me</button>',
replace: true,
//require: 'ngModel',
link: function ($scope, elem, attr, ctrl) {
elem.bind('click', function () {
$scope.$apply(function () {
$scope.myDirectiveVar = !$scope.myDirectiveVar;
});
});
console.debug($scope);
//var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
// $compile(textField)($scope.$parent);
}
};
});
</script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
This scope value <input type="checkbox" ng-model="name">
<my-directive my-directive-var="name"></my-directive>
</body>
</html>
为情所困2017-05-15 16:55:35
Ouvrez d'abord une portée indépendante et utilisez '=' pour effectuer une liaison bidirectionnelle sur un objet de la portée Comme dans l'exemple ci-dessous, l'obj de l'instruction est lié et transmis à l'objet addTaskClassBoxDisplay
.angular.module('todoWithAngularApp').directive('index', function () {
return {
restrict: 'E',
scope:{
'obj': '=obj'
},
templateUrl: '/scripts/template/index.html',
replace: true,
link: function (scope, iElement, iAttrs) {
}
};
========================
<index obj="addTaskClassBoxDisplay "></index>
伊谢尔伦2017-05-15 16:55:35
Avant de poser cette question, permettez-moi de corriger la question.
Vous souhaitez modifier le $scope du contrôleur. Tout d’abord, l’instruction que vous définissez vous-même est la portée dans le contrôleur. Il n’hérite pas et ne crée pas de portée distincte. Ainsi, si vous modifiez les attributs dans le cadre de votre instruction, vous modifierez certainement les attributs correspondants de la portée du contrôleur qui fait référence à cette instruction.
Vous vous demandez peut-être pourquoi n'ai-je pas modifié la portée du contrôleur lorsque je l'ai écrit ?
La raison est que vous avez utilisé
iElement.on('clic', '#addTaskClass', fonction(événement) {
scope.addTaskClassBoxDisplay = true;
L'écouteur de clics que vous définissez vous-même déclenche la modification de l'attribut scope et ne demandera pas à Angular d'effectuer une vérification sale. En d'autres termes, si vous modifiez addTaskClassBoxDisplay, il ne répondra pas sur la page.
Comment corriger cette erreur. Ajoutez simplement $apply(). Déclenchez manuellement des vérifications sales. Comment l'utiliser ? Demandez à Baidu par vous-même.
Revenons maintenant à votre question. Comment laisser la directive modifier la portée du contrôleur.
1. Commençons par les attributs internes de la directive.
L'attribut scope de la directive, ses trois méthodes peuvent modifier la portée du contrôleur.
1.scope n'est pas défini ou scope:false. Il utilise directement la portée du contrôleur
2. portée : vrai. C'est la portée qui hérite du contrôleur. À ce stade, il est préférable de définir le contenu que vous souhaitez modifier en tant qu'objet.
3. portée : {clé : '=clé'}. Il s'agit d'une portée indépendante. La méthode de modification est la même que ci-dessus, il est préférable de le définir comme un objet
Alors dis-le à un autre. En utilisant iAttrs, définissez-le comme attribut sur la directive.
var model = $parse(iAttrs.addTaskClassBoxDisplay);
iElement.on('clic', '#addTaskClass', fonction(événement) {
model.assign(scope,true);
scope.$apply();
2. Utilisez la radio. Plus précisément Baidu.
3. Utilisez le service pour livrer.
4. L'instruction appelle $rootScope, puis rend l'attribut scope du contrôleur égal à l'attribut $rootScope. (Ne fais jamais ça)
Il est temps d'aller travailler, vous pourrez donc utiliser Baidu plus tard.
世界只因有你2017-05-15 16:55:35
http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
Bases : http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/