Angularjs 自定义指令未输出正确的结果_Angularjs_Angularjs Directive

Angularjs 自定义指令未输出正确的结果

angularjs

Angularjs 自定义指令未输出正确的结果,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有以下自定义指令customerDirective： var app = angular.module('directiveApp', []); var dirController = app.controller('DirectiveController', function() { this.customer = { name: 'James', address: 'Mellieha' }; }); dirController.direc

我有以下自定义指令

customerDirective

：

var app = angular.module('directiveApp', []);

var dirController = app.controller('DirectiveController', function() {
    this.customer = {
        name: 'James',
        address: 'Mellieha'
    };
});

dirController.directive('customerDirective', function() {
    return {
        template: 'Name: {{customer.name}}      Address: {{customer.address}}'
    };
});

我在

index.html

中调用了它，如下所示：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-example12-production</title>
    <script src="../../bower_components/angular/angular.min.js"></script>
    <script src="directive.js"></script>
</head>

<body ng-app="directiveApp">
    <div ng-controller="DirectiveController">
        <div customer-directive></div>
    </div>
</body>

</html>

由于某些原因，无法捕获包含客户详细信息的角度表达式。我不得不承认，我可能忽略了一些非常明显的事情，但遗憾的是，到目前为止，我还没有做到这一点

PS：此示例直接取自AngularJS开发人员指南，特别是第

节，如果您将-->$scope更改为其工作范围

var app = angular.module('directiveApp', []);
var dirController = app.controller('DirectiveController', function($scope) {
// Here Change         
$scope.customer = {
            name: 'James',
        address: 'Mellieha'
    };
});

dirController.directive('customerDirective', function() {
    return {
        template: 'Name: {{customer.name}}      Address: {{customer.address}}'
    };
});

您有两个选项来解决此问题：

$scope示例：

var-app=angular.module（'directiveApp'，[]）；
app.controller（'DirectiveController'，函数（$scope）{
$scope.customer={
姓名：“詹姆斯”，
地址：'Mellieha'
};
});
app.directive（'customerDirective'，function（）{
返回{
模板：“名称：{{customer.Name}}地址：{{customer.Address}”
};
});

控制器为（不含$scope）的示例：

app.controller（'DirectiveController'，function（）{
此。客户={
姓名：“詹姆斯”，
地址：'Mellieha'
};
});
app.directive（'customerDirective'，function（）{
返回{
模板：“名称：{{dirCtrl.customer.Name}}地址：{{{dirCtrl.customer.Address}”
};
});

如果使用“dirController”变量创建指令，则该指令有效。但你说的是创建控制器和指令的正确方法。但我必须使用

$scope

？我认为使用

这个

被认为是最佳实践……不，你没有。您还可以将控制器用作sytax。我将编辑我的postAh，好吧，所以我必须在指令的规范内引用控制器！我从来没有想过它会这样，我认为它可能是一个潜在的麻烦制造者。但我只是在一个plunker中测试了它，这两个（app和dirController）是相等的，所以没有区别，你可以同时使用它们

var app = angular.module('directiveApp', []);
var dirController = app.controller('DirectiveController', function($scope) {
// Here Change         
$scope.customer = {
            name: 'James',
        address: 'Mellieha'
    };
});

dirController.directive('customerDirective', function() {
    return {
        template: 'Name: {{customer.name}}      Address: {{customer.address}}'
    };
});