My drag and drop is not working. Can anyone tell me what wrong in it?
html link:
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">
</script>
<script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="myModule" ng-controller="myController">
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}
</div>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:100px; margin-top:40px;border-color:green;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}
</div>
</div>
</body>
Angular code:
var myApp = angular.module("myModule",[]);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
Register the angular-drag-and-drop module in your app:
var myApp = angular.module("myModule", ['ang-drag-drop']);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
I came across three show-stoppers when I tried to make this work:
First, verify that the path to the component actually exists. On my machine, at least, Bower installs to ./bower_components/, not ./components/.
Simo Endre is right that the component needs to be registered, but it needs to be registered as ngDragDrop, not ang-drag-drop.
Finally, the component in question (codef0rmer/angular-dragdrop) relies on jQuery and jQuery-UI to do its magic, so you'll need to add them to your project:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
...
</head>
Not sure if this last one is a deal-breaker for you, given the title of your question. ¯_(ツ)_/¯
Anyway, after making those changes the code seems to work as intended.
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
I've started moving my angularJS controllers into separate files for the sake of readability, however I found this causes the controller defined in a separate file to not run at all. However, I'm wondering if this has to do with my MakeGray.html being in a separate folder from MakeGray.js?
http://imgur.com/2XWf8Ge
When the drop down menu item selected is MakeGray it will inject the following html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<body ng-controller="MakeGray">
<div class="row">
<div class ="col-md-4 col-md-offset-5">
<!--<button type="button" class="btn btn-primary" ng-model-->
<button ng-click="MakeGray_Button()">Make Gray</button>
</div>
</div>
<script src="../../js/jQuery.js"></script>
<script src="../../js/angular.js"></script>
<script src="../../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="../../js/MakeGray.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>
js app
var app = angular.module("app", [
"MakeGray",
"ui.bootstrap"
]);
js MakeGray
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
alert("HELLO"); // Doesn't even get to hello when I click on the MakeGray button
}]);
My firebug outputs no errors
I'm not sure what you mean by the title, you're only trying to access one controller on this page. Anyway the functionality you're trying to get works.. heres a plnkr. I will note that you have to wrap the alert in a $scope function to make it fire with the button.
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
$scope.MakeGray_Button = function(){
alert("HELLO"); // Does get to hello when I click on the MakeGray button
}
}]);
I have just created a very simple app.
It only contains one function which is used in ng-click.
Somehow, ng-click is not firing.
Can anyone take a look for me?
Plunker:
http://plnkr.co/edit/DxwX5sJVaKABeC2JBF8M?p=preview
HTML
var app = angular.module('myApp');
app.controller('createController', ['$scope', function($scope){
$scope.submitProject = function(){
alert('wahaha');
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="form-group text-right">
<button class="btn btn-primary btn-lg" ng-click="submitProject()">Submit</button>
</div>
</body>
</html>
Add an ng-controller, so ng-click will know which controller is the function.
<div class="form-group text-right" ng-controller="createController as create">
<button class="btn btn-primary btn-lg" ng-click="create.submitProject()">Submit</button>
</div>
I recommend using controllerAs, try reading about this in this article.
you need to bind your controller by adding an ng-controller attribute like
<body ng-controller="createController">
to an element that encompasses the html that you would like to bind the scope of your createController to.
Adding the controller to an outer Div will solve your problem.
<div ng-controller='createController' class="form-group text-right">
Hope it helps.
It looks like the module 'myApp' is not correctly instantiated. It should be:
var app = angular.module('myApp', []);
This is because you need to pass in an array which is the list of modules myApp depends on. In this case, it is an empty array.
You will also need to add the controller to the view as suggested by previous answers.
I can't see the star rating input anywhere. Isn't it loaded? Am I using the directive wrong? Please help.
I have included the ui.bootstrao, JQuery, Bootstrapm and thought the directive should work right out of the box.
When I try to specify ui.bootstrap when defining the ng-app the ng-resource stop working.
var app = angular.module('mainApp', ['ngResource','ui.bootstrap']);
test.html:
<!doctype html>
<html data-ng-app="mainApp">
<head>
<title>Test app/title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
</head>
<body role="document">
<div class="container">
<div class="page-header">
<h1>Test</h1>
</div>
<div ng-controller="PostIndexCtrl">
<div class="row">
<rating value="rate" max="5"></rating>
<div ng-repeat="item in items">
<div class="col-xs-1 col-md-3">
{{item.name}} <img class="thumbnail" src="{{item.photo}}" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="js/services.js"></script>
</body>
</html>
service.js:
var app = angular.module('mainApp', ['ngResource']);
app.factory("Post", function($resource) {
return $resource("/api/item");
});
app.controller("PostIndexCtrl", function($scope, Post) {
Post.get(function(data) {
// alert(data.items);
$scope.items = data.items;
});
});
This line in your html seems off to me:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
Use:
angular-bootstrap/ui-bootstrap-tpls.js
or
angular-bootstrap/ui-bootstrap-tpls.min.js
instead of simply using:
angular-bootstrap/ui-bootstrap.js
which doesn't contain the templates.
If using bower, then install with:
bower install angular-bootstrap
Depending on your setup (and possibly .bowerrc file) the angular-bootstrap directory will, by default, be put in the directory:
bower_components/angular-bootstrap/ (or perhaps simply components/angular-bootstrap in your config)
where you can find the files mentioned above.