I am quite new in the area of AngularJS and of course I am doing something in the wrong way. So, here is my problem: I have a small chat widget which takes the data through JSON from a PHP API. In my JSON I provide all the messages with wrappers and with some ng* tags. The problem I have is that the ng-click action is not fired on those elements. The html block are injected with ng-bind-html.
Here is my angular app:
var chat = angular.module("chat", ['ngDialog']);
chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
$scope.messages = "";
$scope.getData = function() {
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
$scope.messages = data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
$scope.getData();
$scope.getHtml = function(html){
return $sce.trustAsHtml(html);
};
// Function to replicate setInterval using $timeout service.
$scope.intervalFunction = function(){
$timeout(function() {
$scope.getData();
$scope.intervalFunction();
}, 5000)
};
// Kick off the interval
$scope.intervalFunction();
$scope.messageAdminTools = function(message_id)
{
console.log("called");
var template = $scope.adminToolsTemplate(message_id);
console.log(template);
ngDialog.open({
template: template,
plain: true
});
};
$scope.adminToolsTemplate = function(message_id)
{
$http.get("/url/to/api" + message_id)
.success(function(data, status, headers, config) {
return data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
});
And here is the html code that comes from the JSON:
<body ng-controller="GetChatMessagesController" class="ng-scope">
<div class="messages-container ng-binding" ng-bind-html="getHtml(messages)">
<div class="message message_1">
<span class="time">16:33</span>
<span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
<span class="text">test x</span>
</div>
</div>
</body>
The ng-click="messageAdminTools('1') does not fire when I click the element. What am I doing wrong?
Thanks!
EDIT: Working code
Here is the code modified after the answer, code that solves the issue:
var chat = angular.module("chat", ['ngDialog']);
chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
$scope.messages = "";
$scope.getData = function() {
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
$scope.messages = data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
$scope.getData();
$scope.getHtml = function(html){
return $scope.messages;
};
// Function to replicate setInterval using $timeout service.
$scope.intervalFunction = function(){
$timeout(function() {
$scope.getData();
$scope.intervalFunction();
}, 5000)
};
// Kick off the interval
$scope.intervalFunction();
$scope.messageAdminTools = function(message_id)
{
console.log("called");
var template = $scope.adminToolsTemplate(message_id);
console.log(template);
ngDialog.open({
template: template,
plain: true
});
};
$scope.adminToolsTemplate = function(message_id)
{
$http.get("/url/to/api")
.success(function(data, status, headers, config) {
return data.html;
}).error(function(data, status, headers, config) {
//alert("AJAX f ailed!");
});
};
}).directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}]);
HTML:
<body ng-controller="GetChatMessagesController" class="ng-scope">
<div class="messages-container" compile="getHtml(messages)">
<div class="message message_1 ng-scope">
<span class="time">16:33</span>
<span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
<span class="text">test x</span>
</div>
</div>
</body>
Try this: angular ng-bind-html and directive within it
Take a look inside the directive that vkammerer provided.
Especially take note of the $compile step.
Related
I searched for this but I did not get any answer as I want, please give me a solution, I want to use ng-init inside ng-repeat, ng-init should give me different response at every loop here is my HTML
<html>
<body ng-app="crmApp">
<div ng-controller="customerDetailController">
<div ng-repeat="clientDetail in client">
<p>{{clientDetail.name}}</p>
<div ng-init="seoDetails = getCustDetail(clientDetail.name)">
<p>{{seoDetails.cust_Name}}</p>
</div>
</div>
</div>
</body>
</html>
and my js is
<script>
var crmMain = angular.module('crmApp', ['ngRoute','ngMaterial']);
crmMain.controller('customerDetailController',function customerDetailController($scope, $http, customerDetailFactory,$window) {
$scope.client = [];
$scope.init = function () {
$scope.getCustomerData();
};
$scope.getCustomerData = function () {
customerDetailFactory.getCustomerDetailData().then(function
(response) {
$scope.client = response.data;
});
};
$scope.getCustDetail = function (Name) {
var custDetail = [];
custDetail = customerDetailFactory.getCustomerDetailData(Name).then(function (response) {
alert(response.data.cust_Name);
return response.data;
});
return custDetail;
};
$scope.init();
});
crmMain.factory('customerDetailFactory', ['$http', function ($http) {
var factory = {};
var url = 'phpFile/customerDetail.php';
factory.getCustomerDetailData = function (Name) {
return $http({
method: 'POST',
url: url,
data: {
'functionName': 'clientDetailPage',
'customerName': Name
}
});
};
return factory;
}]);
</script>
In inside getCustDetail function I was given alert in there it 'll show name, but I don't know why it not showing in HTML.is anything wrong I did?
I have got one solution for this, I think I have to use Promises for this, but I don't know how to use it can anyone help me in this?
You cannot use ng-init for this purpose.
You've to do the data fetching inside the controller itself. That is like,
customerDetailFactory.getCustomerDetailData()
.then(function(response) {
$scope.client = response.data;
// for each clients, fetch 'seoDetails'
$scope.client.forEach(function(client) {
customerDetailFactory.getCustomerDetailData(client.name)
.then(function (response) {
// I hope response.data contains 'cust_Name'
client.seoDetails = response.data;
})
});
});
Now, in the view, you can directly use the seoDetails property
<div ng-repeat="clientDetail in client">
<p>{{clientDetail.name}}</p>
<p>{{clientDetail.seoDetails.cust_Name}}</p>
</div>
I am not able to pass data to controller's function through angular directive, directive has one change event. In which i want to pass my dynamic id.
In controller i have myArray
$scope.myArray = [1,2,3,4,5];
I have following html.
<div ng-repeat="data in myArray track by $index">
<input type="file" ng-upload-change="uploadFile($event, $id)" my-id="$index">
<div>
In Controller:
$scope.uploadFile = function($event, $id){
var files = $event.target.files;
console.log("id:"+$id);
};
In directive:
app.directive('ngUploadChange', function() {
return{
scope:{
ngUploadChange:"&",
myId:"="
},
link:function($scope, $element, $attrs){
$element.on("change",function(event){
$scope.ngUploadChange({$event: event, $id : $scope.myId});
})
$scope.$on("$destroy",function(){
$element.off();
});
}
}
});
As you can see that when i pass uploadFile function to ngUploadChange directive, it always pass first id (in this case it is 1) to controllers function.
I am not getting updated id every time.
Thanks in advance.
When you want to pass parameters through the function, you can use "=" instead of "&" for that attr binding, and in your HTML, you can specify like this:
<input type="file" ng-upload-change="uploadFile" ... />
And, I changed the way you were passing an object of params since there is no need to create that object.
Now, if you see the code snippet below, it correctly logs id: x (0-based) on each file upload.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.myArray = [1, 2, 3, 4, 5];
$scope.uploadFile = function($event, $id) {
var files = $event.target.files;
console.log("id: " + $id);
};
});
myApp.directive('ngUploadChange', function() {
return {
scope: {
ngUploadChange: "=",
myId: "="
},
link: function($scope, $element, $attrs) {
$element.on("change", function(event) {
$scope.ngUploadChange(event, $scope.myId);
})
$scope.$on("$destroy", function() {
$element.off();
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="data in myArray">
<input type="file" ng-upload-change="uploadFile" my-id="$index">
</div>
</div>
It is better to write the directive without isolate scope.
app.directive('ngUploadChange', function() {
return{
/*
scope:{
ngUploadChange:"&",
myId:"="
},*/
link:function($scope, $element, $attrs){
$element.on("change",function(event){
var locals = { $event: event,
$id : $scope.$eval($attrs.myId)
};
$scope.$eval($attrs.ngUploadChange, locals);
});
/*
$scope.$on("$destroy",function(){
$element.off();
});*/
}
}
});
Use $scope.$eval instead of isolate scope bindings.
Isolate scope adds a scope and additional watchers which have been known to cause digest cycle delays that fight the ngModelController.
I am newbie to angularjs. I succeeded in making the fileuploader work and displaying the files uploaded. Now I want to remove the files which I do not want.
Here is how my upload and display works.
html file
<div class="container-fluid">
<error-display error-display-api="errorDisplayApi"></error-display>
<div ng-controller="complianceItemDocumentcontroller">
<div class="form-inline">
<span class="btn btn-default">
Add Photo
<input ng-model="file"
onchange="angular.element(this).scope().file_changed(this)"
type="file" accept="image/*">
</span>
<button ng-click="removeFile()">Delete Photo</button>
</div>
<div ng-repeat="images in document">
<label name ="desscription" ng-bind ="images.Description"></label><br>
</div>
</div>
</div>
javascript file
app.controller('complianceItemDocumentcontroller', ['$scope', '$http', function ($scope, $http)
{
var url = "http://localhost:/....";
$http.get(url)
.success(function (data, status, headers, config)
{
$scope.document = data;
})
.error(function (data, status, headers, config)
{
$scope.document = undefined;
});
$scope.removeFile = function()
{
alert("delete");
};
$scope.file_changed = function(element)
{
$scope.$apply(function (scope)
{
var fd = new FormData();
fd.append('file', element.files[0]);
var urlpost = "http/.....";
var req = { method: 'POST', url: urlpost, headers: { 'Content- Type': undefined }, data: fd}
$http(req)
.success(function (data, status, headers, config)
{
alert("uploaded");
})
.error(function (data, status, headers, config)
{
alert("fail");
});
});
}
}]);
I should be able to select the images in the list and based on the selection of the file I should be able to call the related API to remove the document using the document ID.
I am unable to figure out how to select a file and upon selected get the document ID. Then I will call the method through httppost and that will be deleting the file in the database. Also I should be able to display the images available as thumbnails. Currently it is just a plain list of names of files.
Thank you for your time and suggestions.
My goal is to get $http to work on my local filesystem by caching some static JSON objects in a $cacheFactory. I wish to avoid network requests entirely and use only cached content.
The issue is that $http is making server requests regardless of the existence of cached content. My code is as follows.
Cache Factory
myApp.factory('jsonCache', function($cacheFactory){
// create new cache object
// (tried $cacheFactory.get('$http') as well, but same result)
var cache = $cacheFactory('jsonCache');
// put static value in cache
cache.put('/json/file1.json', {"key":"value"});
return cache;
});
Factory using $http
myApp.factory('AjaxFactory', function($http, jsonCache){
console.log(jsonCache.info()); // {id: 'jsonCache', size: 1}
// this will make a request to "http://localhost/json/file1.json"
// even though there is an entry for that URL in the cache object
$http.get('/json/file1.json', {cache: jsonCache}).success(/* ... */);
return { /* ... */ };
});
At this point I'm thinking it may be the format of the data I'm using in cache.put(), but unsure.
Please see demo code below, commends should help you a bit
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider.state('state1', {
url: "/state1",
template: "<h1>State1 </h1> <pre>{{cache | json}}</pre>",
controller: 'state1Ctrl'
})
.state('state2', {
url: "/state2",
template: "<h1>State2 </h1><pre>{{cache | json}}</pre>",
controller: 'state2Ctrl'
});
});
app.controller('state1Ctrl', function($scope, myCache) {
var cache = myCache.cache.get('jsonCache');
//check if cached data exist
if (cache) {
//use cached data
$scope.cache = myCache.cache.get('jsonCache');
//if not update cache
} else {
myCache.update().success(function(data) {
//set cache
myCache.cache.put('jsonCache', data.info);
console.log(myCache.cache.info());
//get cached data
$scope.cache = myCache.cache.get('jsonCache');
}).error(function() {
console.log("error");
});
}
});
app.controller('state2Ctrl', function($scope, myCache) {
var cache = myCache.cache.get('jsonCache');
if (cache) {
$scope.cache = myCache.cache.get('jsonCache');
} else {
myCache.update().success(function(data) {
myCache.cache.put('jsonCache', data.info);
console.log(myCache.cache.info());
$scope.cache = myCache.cache.get('jsonCache');
}).error(function() {
console.log("error");
});
}
});
app.factory('myCache', function($cacheFactory, $http) {
// create new cache object
var cache = $cacheFactory('jsonCache');
// put static value in cache
function update() {
alert("update")
return $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra");
}
return {
cache: cache,
update: update
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<body ng-app="app">
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
I was actually able to get it working as desired on this plunk http://plnkr.co/edit/x1nfjwEoJOxzZN5PUyrX?p=preview
angular.module("myApp", [])
.factory('jsonCache', function($cacheFactory) {
// create new cache object
// (tried $cacheFactory.get('$http') as well, but same result)
var cache = $cacheFactory('jsonCache');
// put static value in cache
cache.put('file1.json', {
"key": "From Cache Factory"
});
return cache;
})
.factory('jsonFactory', function($http, jsonCache) {
var get = function(url) {
return $http.get(url, {
cache: jsonCache
});
};
return {
get: get
};
})
.controller("Ctrl", function($scope, jsonFactory, jsonCache) {
$scope.cacheInfo = jsonCache.info();
jsonFactory.get('file1.json').success(function(res) {
$scope.json = res;
});
});
I think the issue with my original code was the result of one of the many 3rd party module dependencies. (doh!)
My workaround for the code as it was, was the following:
myApp.factory('jsonFactory', function($http, $q, jsonCache){
var get = function(url){
var data = jsonCache.get(url);
// if data exists in cache, wrap in promise and return
// or do regular $http get
if(data){
return $q(function(resolve, reject){ resolve(data); });
} else {
return $http.get(url);
}
};
return {
get: get
};
});
i'm building application which uses CORS requests. Each request i use get host address from a constant
angular.module('siteApp').constant('baseUrl', {
'server':'htttp://localhost/',
})
And in each service i use to send request like this:
angular.module('siteApp').factory('DocsSvc', function ($http, baseUrl) {
var baseurl = baseUrl.server ;
$http.get(baseurl + 'document')
Is it possible to make 'htttp://localhost/' value - to came from config.json file into baseUrl constant or baseUrl factory?
I mean : how can i load something from ajax request an make it accessible to app modules
i have tried:
.run(['$rootScope', , function ($rootScope) {
$.ajax('config.json', {async: false})
.success(function (data) {
$rootScope.HOST = data.HOST;
});
And tried to access it from baseUrl:
angular.module('siteApp').factory('baseUrl',function($rootScope) {
return {
server: $rootScope.HOST
But no luck - the baseUrl.server comes undefined into functions
You can use run method of angular.
var app = angular.module('plunker', []);
app.run(function($http, $rootScope){
$http.get('config.json')
.success(function(data, status, headers, config) {
$rootScope.config = data;
$rootScope.$broadcast('config-loaded');
})
.error(function(data, status, headers, config) {
// log error
alert('error');
});
})
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.$on('config-loaded', function(){
$scope.name = $rootScope.config.name;
});
});
see this plunker
If you want to do it even before the angular app starts, you can, instead of using the ng-app directive, use the bootstrap function.
From:
https://docs.angularjs.org/api/ng/function/angular.bootstrap
<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
// Do your loading of JSON here
angular.bootstrap(document, ['demo']);
</script>
</body>
</html>
You need to tell angular about data change, so modify your code something like this:
.run(['$rootScope', function ($rootScope) {
$.ajax('config.json', {async: false})
.success(function (data) {
$rootScope.HOST = data.HOST;
$rootScope.$apply(); // New line
});
}])
That $apply() is needed since its a non-angular asynchronous call.
use the blow code snippet to load the json values
.run(function ($http, $rootScope) {
$http.get('launchSettings.json')
.success(function (data, status, headers, config) {
$rootScope.config = data;
$rootScope.$broadcast('config-loaded');
})
.error(function (data, status, headers, config) {
// log error
alert('error');
});
});