Question

我正在学习AngularJS。现在我正在尝试这些指令。我创建了一个指令，但我无法使它工作。我可以用$ scope做到这一点，但我想知道如何在没有它的情况下做到这一点。 代码：

transform: rotate(180deg);

结果是：

<div ng-app="myApp" ng-controller="controls">
    <div the-name></div>
</div>

<script src="angular.js"></script>

<script>
    var modu = angular.module("myApp", []);

    modu.controller("controls", [function() {
        var self = this;
        self.user = {
            name : "Pedro",
            lastname: "Delgado"
        };
    }]);

    modu.directive("theName", [function() {
        return {
            template: 'Name: {{user.name}}'
        };
    }]);
</script>

我想要：

Name:

任何人都可以帮助我吗？非常感谢！

Answer 1

它被称为controller-as语法。您需要在模板中为控制器创建别名：

<div ng-app="myApp" ng-controller="controls as ctrl">
    <div the-name></div>
</div>

然后在指令模板中使用{{ctrl.user.name}}。

但理想情况下，您会将指令的范围隔离开来，因为您不希望它了解其周围环境以及使用了哪个controllerAs别名。

这个版本的指令将更加可重用：

modu.directive("theName", [function() {
    return {
        scope: {
            user: '='
        },
        template: 'Name: {{user.name}}'
    };
}]);

用法是：

<div ng-app="myApp" ng-controller="controls as ctrl">
    <div the-name user="ctrl.user"></div>
</div>

所以在这种情况下，指令（和模板）对它所使用的环境一无所知（关于控制器前缀等），它只关心在其中传递正确的用户对象。这是孤立范围的重点。

创建没有$ scope的指令AngularJS

1 个答案: