Question

在我的指令中引用控制器时。模板未正确呈现 $scope.name = "James". 相反，该模板正在显示＆＃34; {{name}}＆＃34;因此不对范围有约束力。如何让模板显示名称？我想在我的指令中引用控制器，我不想在我的指令中定义控制器。

错误我得到：错误：[ng：areq]参数＆＃39; fn＆＃39;不是函数，有字符串

模板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>

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

Answer 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。

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

Answer 2

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

＆＃13;

// 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'
        }
    }
});

＆＃13;

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

的掠夺者

希望这有帮助

指令 - 范围不绑定到templateurl，angularjs

2 个答案: