angularjs – 为什么我无法访问正确的范围？

发布时间：2020-12-17 17:18:41 所属栏目：安全来源：网络整理

导读：HTML： !doctype htmlhtmlhead/headbodydiv ng-app="project" div ng-controller="mainCtrl" {{ property1 }} br / {{ property2 }} div class="ts" d-child property1="{{ property1 }}cloud" property2="property2" property1: {{ property1 }} br / prope

HTML：

<!doctype html>
<html>
<head>
</head>
<body>
<div ng-app="project">
   <div ng-controller="mainCtrl">
    {{ property1 }}
    <br />
    {{ property2 }}
    <div class="ts" d-child property1="{{ property1 }}cloud" property2="property2">
        property1: {{ property1 }}
        <br />
        property2: {{ property2 }}
    </div>

    </div>
    </div>
    </body>
</html>

JS：

angular.module('project',[])
.controller('mainCtrl',function($scope) {
    $scope.property1 = 'ss';
    $scope.property2 = 'dd';
});

angular.module('project')
.directive('dChild',function() {
    return {
        restrict: 'A',scope: {
            property1: '@',property2: '='
        },link: function(scope,element,attrs) {

        }
//      template: '<input type="text" ng-model="property1" />'
    }
})

我认为property1：{{property1}}将是“property1：sscloud”,但事实证明它是“ss”,好像它仍然指的是mainCtrl控制器的范围,不应该是指的范围d-child指令？

如果我在指令中使用模板,它确实引用了正确的范围并显示’sscloud’,任何人都可以告诉我为什么？

解决方法

当angular编译具有隔离范围的元素时,它有一些规则：

>如果指令没有模板属性(或templateUrl),则内部内容将附加到父作用域.实际上在this commit之前,内部内容正在被孤立的范围.检查您的示例以确认它适用于小于1.2的版本
>如果指令确实具有模板属性,那么它将覆盖内部内容(除非被转换).
>仅当您使用转换时,内部内容才会附加到同级作用域(非隔离).
>角度以这种方式工作的原因是为了让可重复使用的组件松散耦合,并且对您的应用程序没有任何副作用.
>没有隔离范围的指令不会从同一元素的隔离指令中获取隔离范围(see important commit).
>指令的模板无论如何都会获得孤立的范围.

如果要更改此行为,可以将隔离范围传递给tranclusion函数,如下所示：

angular.module('project')
.directive('dChild',transclude: true,attrs,ctrl,linker) {
          linker(scope,function(clone,scope){
            element.append(clone)
          })
        }
    }
})

我强烈建议你看看这些教程：

> Angular.js – Transclusion basics
> Angular.js – Components and containers

阅读更多：

> Access directive’s isolate scope from within transcluded content
> https://github.com/angular/angular.js/wiki/Understanding-Scopes

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!