Beep Beep - 29 days ago 6
AngularJS Question

Get new name to show in angular scope

I have a simple angular controller to post a new name and display the name on the page.

The problem is I cant see the name and the rest of the details to show in the scope ....

Any idea how to fix this and why its not working ?

HTML

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Angular Base64 Upload Demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
<script type="text/javascript" src="app.js"></script>

</head>
<body>

<div ng-controller="UpLoadImage">

<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{step}}"/>
</div>

<label for="file">Select File</label>
<input type='file' name='file' base-sixty-four-input required onload='onLoad' maxsize='600'
accept='image/*' ng-model-instant onchange='angular.element(this).scope().imageUpload(this)'/>
</div>

<div ng-controller="PostData">
{{items.c_name}}

<form ng-submit="sendPost()">
<input ng-model="newName"/>
<button type="submit">Send Data</button>
</form>
</div>

</body>
</html>


App.js

angular.module('myApp', ['naif.base64'])
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) {

$scope.imageUpload = function (element) {
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
};

$scope.imageIsLoaded = function (e) {
$scope.$apply(function () {
$scope.stepsModel.push(e.target.result);
});

$scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
alert('image uploaded');
};
};

$scope.stepsModel = [];
})

.controller('PostData', function ($scope, $http) {
$scope.items = {
c_name: "Campaign name here",
max_slots: 5,
slots: [
{
slot_id: 1,
base_image: "base 64 image"
}
]
};

$scope.newName = "Enter name";
$scope.sendPost = function() {
var data = $.param({
json: JSON.stringify({
c_name: $scope.newName
})
});
$http.post("/echo/json/", data).success(function(data, status) {
$scope.items = data;
})
}
});

Answer Source

You missed ng-model property in base-sixty-four-input directive input:

angular.module('myApp', ['naif.base64'])
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) {

    $scope.imageUpload = function (element) {
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
    };

    $scope.imageIsLoaded = function (e) {
        $scope.$apply(function () {
            $scope.stepsModel.push(e.target.result);
        });

        $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
            alert('image uploaded');
        };
    };

    $scope.stepsModel = [];
})

.controller('PostData', function ($scope, $http) {
    $scope.items = {
        c_name: "Campaign name here",
        max_slots: 5,
        slots: [
            {
                slot_id: 1,
                base_image: "base 64 image"
            }
        ]
    };

    $scope.newName = "Enter name";
    $scope.sendPost = function() {
        var data = $.param({
            json: JSON.stringify({
                c_name: $scope.newName
            })
        });
        $http.post("/echo/json/", data).success(function(data, status)  {
            $scope.items = data;
        })
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Base64 Upload Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body>

<div ng-controller="UpLoadImage">

    <div ng-repeat="step in stepsModel">
        <img class="thumb" ng-src="{{step}}"/>
    </div>

    <label for="file">Select File</label>
    <input ng-model="file" type='file' name='file' base-sixty-four-input required onload='onLoad' maxsize='600'
           accept='image/*' ng-model-instant onchange='angular.element(this).scope().imageUpload(this)'/>
</div>

<div ng-controller="PostData">
    {{items.c_name}}

    <form ng-submit="sendPost()">
        <input ng-model="newName"/>
        <button type="submit">Send Data</button>
    </form>
</div>

</body>
</html>