简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - angular作用域
PHP中文网
PHP中文网 2017-05-15 16:58:35
0
3
495

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

    <!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中文网

认证0级讲师

모든 응답(3)
过去多啦不再A梦
过去多啦不再A梦2017-05-15 17:00:35 3층

으아악

우선, 당신이 쓴 내용은 지침과 거의 관련이 없습니다. 지시문의 범위는 지시문에 영향을 미치는 템플릿의 범위이지만 여기서는 그렇지 않습니다. scope是影响它的template的作用域，这里并不是。

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

这里undefined的原因是因为controller在ng-init之前执行了。可以用用延时或者$watch 으아악

여기서 정의되지 않은 이유는 컨트롤러가 ng-init 전에 실행되기 때문입니다. 지연이나 $watch를 사용하여 모니터링할 수 있습니다🎜 으아악
좋다 +0
답글 추가
阿神
阿神2017-05-15 17:00:35 2층

글쎄,,, 위에서 정의되지 않은 내용은 이해하지만 여전히 후자, 즉 scope:{}时，Inside myDirective : {{myProperty}}这个表达式还是属于外面那个作用域是不是？而此时template里面并没有设定，，，所以隔离作用域就没有起作用，我这样理解对吗？
还有一个问题，既然这样，，，那为什么如果把scope设定为scope:true가 다음 결과인 경우에 대해서는 약간 혼란스럽습니다.

으아악

좀 더 조언해주실 수 있나요? 감사합니다~~

좋다 +0
답글 추가
Ty80
Ty802017-05-15 17:00:35 1층

scope true는 독립적이고 격리된 범위입니다
{}. {} 내부의 속성만 격리됩니다

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！