CODEWITHSUNDEEP
angularjs
Abdul Rahaman Abdullah
Abdul Rahaman Abdullah

Reputation: 97

directive - scope not binding to templateurl, angularjs

When referencing a controller in my directive. the template is not rendered correctly.
$scope.name = "James". Instead, the template is displaying "{{name}}" and thus not binding to the scope. How can I make my template display the name? I want to refer to controllers in my directive, I don't want to define a controller within my directive.

Error I'm getting: Error: [ng:areq] Argument 'fn' is not a function, got string

template html

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

  {{name}}
 </div>

directive

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

Controller

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

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

Index view

 <room-availability></room-availability>

update Plunk: http://plnkr.co/edit/mVMN65bx7OT70OwSOllW?p=preview

Upvotes: 0

Views: 864

Answers (2)

Anand G
Anand G

Reputation: 3210

You can resolve this issue in multiple ways, but I could think of below for now

// 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 to http://plnkr.co/edit/xnpq83akxbDF8m6oy1Bj?p=preview

Hope this helps

Upvotes: -1

Joy
Joy

Reputation: 9560

Basically, just your Plunker is not well organized. Check this one: Plunker.

Your angular import line:

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

is not working. Because https://code.angularjs.org/2.0.0-alpha.31/angular.js is not there. What I did to your plunker:

  1. I changed to some 1.x version.
  2. Remove unknown providers serverUrl, hubName
  3. Change the template url from Widgets/RoomAvailability/Template.html to Template.html.

Advice: Check errors on the console whenever your code fails.

Upvotes: 0

Related Questions