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自定義指令 - 隔離範圍問題

回答

相關問題