指令 - 范围未绑定到 templateurl，angularjs答案

【问题标题】：directive - scope not binding to templateurl, angularjs指令 - 范围未绑定到 templateurl，angularjs
【发布时间】：2015-09-01 09:06:26
【问题描述】：

在我的指令中引用控制器时。模板未正确呈现。
$scope.name = "James". 相反，模板显示“{{name}}”，因此不绑定到范围。如何让我的模板显示名称？我想在我的指令中引用控制器，我不想在我的指令中定义控制器。

我得到的错误：错误：[ng:areq] 参数 'fn' 不是函数，得到字符串

模板 html

<div id="room-availability-widget">

  {{name}}
 </div>

指令

 app.directive("roomAvailability", ["backEndServerUrl", "hubName", function (serverUrl, hubName) {
    return {
        restrict: 'E',
        templateUrl: 'Widgets/RoomAvailability/Template.html',
        scope: {},
        controller: 'clientHandlers'
    }
}]);

控制器

 app.controller('clientHandlers', ["$scope", function clientHandlers($scope)       
{

    $scope.name = "James";
}])

索引视图

 <room-availability></room-availability>

更新猛戳：http://plnkr.co/edit/mVMN65bx7OT70OwSOllW?p=preview

【问题讨论】：

在 Plunkr 上发布一个重现问题的完整示例。并发布完整的错误堆栈跟踪。告诉我们它指的是哪一行代码。另外，在指令中注入 serverUrl 和 hubName 有什么好处，因为它根本不使用它们？

标签： angularjs

【解决方案1】：

基本上，只是您的 Plunker 组织得不好。检查这个：Plunker。

您的角度导入线：

<script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>

不工作。因为https://code.angularjs.org/2.0.0-alpha.31/angular.js 不存在。我对你的笨蛋做了什么：

我改成了一些 1.x 版本。
删除未知提供者serverUrl, hubName
将模板网址从Widgets/RoomAvailability/Template.html更改为Template.html。

建议：每当您的代码失败时，请在控制台上检查错误。

【讨论】：

【解决方案2】：

您可以通过多种方式解决此问题，但我现在可以想到以下方法

// Code goes here

var app = angular.module("RoomAvailabilityWidget", [])
    
app.directive("roomAvailability", function () {
    return {
        restrict: 'E/A',
        templateUrl: 'Template.html',
        scope: {name: '@'},
        controller : function( $scope ){
            //$scope.selectedFile = "No files selected";
           $scope.name = 'james'
        }
    }
});

Plunker 到http://plnkr.co/edit/xnpq83akxbDF8m6oy1Bj?p=preview

希望对你有帮助

【讨论】：

如果控制器的值是一个名字，Angular 会为你找到控制器。