J'ai rencontré une certaine confusion lors de l'apprentissage des instructions aujourd'hui :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="../css/lib/bootstrap4.css">
<script type="text/javascript" src='../js/lib/angular.js' ></script>
<script type="text/javascript" src='js/scope2.js'></script>
</head>
<body>
<p ng-init = 'someProperty="some date"'>
<p ng-init='siblingProperty="moredata"'>
Inside p Two : {{aThirdProperty}}
<p ng-init="aThirdProperty='data for 3rd property'" ng-controller="someCtrl">
Inside p Three: {{aThirdProperty}}
<p ng-controller="secondCtrl">
Inside p Four: {{aThirdProperty}}
<br>
OutSide myDirective: {{myProperty}}
<p my-directive ng-init="myProperty='wow! that is cool'">
Inside myDirective : {{myProperty}}
</p>
</p>
</p>
</p>
</p>
</body>
</html>
js
var app = angular.module('app', []);
app.controller('someCtrl', ['$scope', function($scope){
}])
app.controller('secondCtrl', ['$scope', function($scope){
console.log($scope.myProperty) //undefined
}])
app.directive('myDirective',function(){
return {
restrict :'A',
scope:false
}
})
Pourquoi undéfini est-il imprimé ?
Ensuite, changez la portée de la commande js en scope:{}
; Pourquoi cela apparaît-il ? Autrement dit, pourquoi le OutSide myDirective: wow! that is cool
extérieur a-t-il de la valeur ?
Inside p Two :
Inside p Three: data for 3rd property
Inside p Four: data for 3rd property
OutSide myDirective: wow! that is cool
Inside myDirective : wow! that is cool
Tout d’abord, ce que vous avez écrit n’a pas grand-chose à voir avec des instructions. Le
scope
de la directive est le champ d'application dutemplate
qui l'affecte, ce qui n'est pas le cas ici.La raison pour laquelle il n'est pas défini ici est que le contrôleur est exécuté avant ng-init. Vous pouvez utiliser un délai ou un
$watch
moniteurHmm, je comprends l'indéfini ci-dessus, mais je suis encore un peu confus sur ce dernier, c'est-à-dire quand
scope:{}
, l'expressionInside myDirective : {{myProperty}}
appartient toujours au champ extérieur, non ? À l'heure actuelle, il n'y a aucun paramètre dans le modèle, donc la portée d'isolation ne fonctionne pas. Ai-je bien compris ?Il y a une autre question. Si tel est le cas, pourquoi le résultat suivant se produit-il si la portée est définie sur
scope:true
:Pouvez-vous me donner plus de conseils ? Merci~~
Scope true est une portée indépendante et isolée
Si {}, seules les propriétés à l'intérieur de {} seront isolées