CODEWITHSUNDEEP
javascriptangularjs
user3189052
user3189052

Reputation: 75

Binding isn't working in Angular

What is wrong here?

JSFiddle.

function SecondCtrl($scope, Data) {
  $scope.data = Data;

  $scope.reversedMessage = function(message) {
    return message.split("").reverse().join("");
  };
}

Upvotes: 0

Views: 56

Answers (2)

Pranav
Pranav

Reputation: 666

Your code i think is incomplete..Iam Attaching a complete code here..Go through it and i hope this is what your looking for.

Visit :http://plnkr.co/edit/HxScwWRT9nnaA5CILE6f?p=preview

Upvotes: 0

Michelle Tilley
Michelle Tilley

Reputation: 159095

As Arun mentioned in his comment, you're missing several key elements here:

  1. You're not bootstrapping your app. You'll need to use either the ng-app directive or angular.bootstrap.

  2. Since you're defining SecondCtrl as a global function (which isn't a best practice), you need to set JSFiddle to load your JavaScript before onLoad; I used No wrap - in <head>:

    screenshot

  3. You're injecting Data into your controller, but you haven't defined Data as a service. You'll need to create a service for this.

Here's a JSFiddle that demonstrates how things might look if you follow best practices and create a module for your controller in addition to fixing the other issues: http://jsfiddle.net/BinaryMuse/TcPGT/

<div ng-app='myApp'>
  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="data.message">
    <h1>{{ reversedMessage(data.message) }}</h1>
  </div>
</div>

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

app.value('Data', {
  message: 'This is my message.'
});

app.controller('SecondCtrl', function($scope, Data) {
  $scope.data = Data;

  $scope.reversedMessage = function(message) {
    return message.split("").reverse().join("");
  };
});

Upvotes: 2

Related Questions