AngularJS自定义指令 - 隔离范围问题

我想知道为什么以下工作不如我预期的那样工作。我认为这将表明这一点： 用户：雅各布Jenkov用户：李四AngularJS自定义指令 - 隔离范围问题

然而，这表明这一点：

用户：用户：

HTML：

<html ng-app="plunker"> 
<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script src="app.js"></script> 
    </head> 
<body ng-controller="MyController as $ctrl"> 
    <userinfo user="jakob"></userinfo> 
    <userinfo user="john"></userinfo> 
    </body> 
</html>

JAVASCRIPT：

var myapp = angular.module('plunker', []); 
myapp.directive('userinfo', function() { 
    var directive = {}; 

    directive.restrict = 'E'; 

    directive.template = "User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>"; 

    directive.scope = { 
     user : "=" 
    } 

    return directive; 
}); 
myapp.controller("MyController", function() { 
    var $ctrl = this; 
    $ctrl.jakob = {}; 
    $ctrl.jakob.firstName = "Jakob"; 
    $ctrl.jakob.lastName = "Jenkov"; 

    $ctrl.john = {}; 
    $ctrl.john.firstName = "John"; 
    $ctrl.john.lastName = "Doe"; 
});

来源

2017-09-11 Tuan Le

您使用控制器的语法，所以你需要将控制器别名$ctrl添加到您在传递给你的变量指令：

<body ng-controller="MyController as $ctrl"> 
    <userinfo user="$ctrl.jakob"></userinfo> 
    <userinfo user="$ctrl.john"></userinfo> 
</body>

没有$ctrl，角将寻找变量直接在$scope，他们没有设置等undefined为p向您的指令而不是所需的用户对象发送。

来源

2017-09-11 16:17:23

一种方式来做到这一点是这样的：

<html ng-app="plunker"> 
<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script> 
    var myapp = angular.module('plunker', []); 

    myapp.directive('userinfo', function() { 

     var directive = {}; 

     directive.restrict = 'E'; 

     directive.template = "User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>"; 

     directive.scope = { 
     user : "=" 
     } 

     return directive; 
    }); 

    myapp.controller("MyController", function() { 

     this.jakob = { 
     firstName: "Jakob", 
     lastName: "Jenkov" 
     } 
     this.john = { 
     firstName: "John", 
     lastName: "Doe" 
     } 

    }); 

    </script> 
</head> 
<body ng-controller="MyController as myCtrl"> 
    <userinfo user="myCtrl.jakob"></userinfo> 
    <userinfo user="myCtrl.john"></userinfo> 
</body> 
</html>

来源

2017-09-11 16:15:43

AngularJS自定义指令 - 隔离范围问题

回答

相关问题