recherche

Maison  >  Questions et réponses  >  le corps du texte

angular.js - angular作用域

今天学习指令，遇到了一些困惑：

    <!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
        
    }

})

为什么打印出来的是undefined？

然后把js指令里的scope改为scope:{};为什么弹出来的是这个？就是说为什么外面的OutSide myDirective: wow! that is cool会有值？

    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
PHP中文网PHP中文网2744 Il y a quelques jours523

répondre à tous(3)je répondrai

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 17:00:35

    <p my-directive ng-init="myProperty='wow! that is cool'">
    Inside myDirective : {{myProperty}}
</p>

    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 du template qui l'affecte, ce qui n'est pas le cas ici. 

    app.controller('secondCtrl', ['$scope', function($scope){
    console.log($scope.myProperty)    //undefined
}])

    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 $watchmoniteur

    $timeout(function() {
  console.log($scope.myProperty)
});
// or
$scope.$watch('myProperty', function(newVal) {
  console.log($scope.myProperty)
})

    répondre
    0
  • 阿神

    阿神2017-05-15 17:00:35

    Hmm, je comprends l'indéfini ci-dessus, mais je suis encore un peu confus sur ce dernier, c'est-à-dire quand scope:{}, l'expression Inside 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 : 

        Inside p Two :
    Inside p Three:　data for 3rd property
    Inside p Four:　data for 3rd property 
    OutSide myDirective:
    Inside myDirect33ive : wow! that is cool

    Pouvez-vous me donner plus de conseils ? Merci~~

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-15 17:00:35

    Scope true est une portée indépendante et isolée
    Si {}, seules les propriétés à l'intérieur de {} seront isolées

    répondre
    0
  • Annulerrépondre