Angular newbie here, running Angular 1.3 & ui-bootstrap 0.12. I'm just trying to learn Angular and ui-bootstrap and am unsure why the Angular Bootstrap collapse directive is not collapsing my div. Clicking on the buttons correctly toggles $scope.rightPanelCollapse yet the collapse is not happening.
Here's my markup:
<body ng-app="uxf.site">
<div class="container-fluid" data-ng-controller="UxfSiteController">
<button data-ng-click="toggleRightPanelCollapse()">{{rightPanelCollapse}}</button>
<button data-ng-click="toggleRightPanelCollapse()">{{rightPanelCollapse}}</button>
<div class="row">
<div id="left-panel" class="col-md-1 grid">
{{rightPanelCollapse}}
</div>
<div id="content" class="col-md-10 col grid">
{{rightPanelCollapse}}
</div>
<div id="right-panel" collapse="rightPanelCollapse">
{{rightPanelCollapse}}
</div>
</div>
</div>
Here's my JS:
(function(angular) {
'use strict';
angular.module('uxf.site', [])
.controller('UxfSiteController', ['$scope', function($scope) {
$scope.rightPanelCollapse = true;
$scope.toggleRightPanelCollapse = function() {
$scope.rightPanelCollapse = !$scope.rightPanelCollapse;
};
}]);
})(window.angular);
...newbie move. I just forget to add ui.bootstrap.collapse as a dependency in my uxf.site module. Problem solved.
Related
I'm using flask(version 1.0.2) and AngularJS (version 1.7.2) material (version 1.1.10).
Problem is the controller is attached to view and it working, but just not showing value in view.
The controller
$$.controller("bigLayoutToolbarController", function ($scope) {
$scope.title = "---"
console.log(">>", $scope.title)
})
Surprisingly the console logging is working.
>> ---
The view
<section layout="row" flex style="height: 100%" ng-controller="bigLayoutToolbarController">
<h2 flex md-truncate>{{ title }}</h2>
</section>
What am i wrong?
Try removing the md-truncate because it will will automatically clip text which is wider than the component.
DEMO
var app = angular.module('myApp',[]);
app.controller("bigLayoutToolbarController", function ($scope) {
$scope.title = "---"
console.log(">>", $scope.title)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<body ng-app="myApp">
<section layout="row" flex style="height: 100%" ng-controller="bigLayoutToolbarController">
<h2 flex md-truncate>{{ title }}</h2>
</section>
</body>
I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.
Screenshot for reference
After Applying ng-repeat
If I leave out ng-repeat and use static items then it works as it should.
When used static
HTML Code for ng-repeat
<section class="mp diff-types-section main-movies-position">
<div class="mp our-recommend-sec">
<div id="owl-demo2" class="owl-carousel" ng-repeat="movie in movieList">
<div class="item">
<div class="types-section">
<img class="types-section-image image-opacity" ng-src="/public/uploads/{{movie.movieId}}/backdrop.jpg" />
</div>
</div>
</div>
</div>
</section>
AngularJs Controller Code
app.controller('MainCtrl', ['$rootScope', '$scope', '$http', '$resource', '$route', '$state', '$location', 'localStorageService', function($rootScope, $scope, $http, $resource, $route, $state, $location, localStorageService) {
$rootScope.showNav = true;
$rootScope.searchBar = false;
$scope.getAllMovieList = function() {
$http.get("/api/getAllMovieList")
.then(function(response) {
$scope.movieList = response.data;
console.log($scope.movieList);
});
}
$scope.getAllMovieList();
}])
If I Keep The Static Code Like This its Working Fine with no issues
<section class="mp diff-types-section our-reccomendation-section">
<div class=" mp our-recommend-sec">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<div class="types-section">
<a ng-click="goToMovieDetail()"> <img class="types-section-image" src="../../images/92ZhAYYce2KfuLgBswzW5HCMKxr.jpg"></a>
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="../../images/Shooter_1920x1080.jpg">
</div>
</div>
<div class="item">
<div class=" types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
</div>
</div>
</section>
Hope I get Solution For this...
Thanks in Advance.
Owl-carousel may not perfectly work with angularjs, would recommend you to use a carousel which supports angularjs, personally i use angular-ui-bootstrap, it has all components bootstrap has to offer but provides angular variants.
This solution would be helpful to you
Put owl carousel function after getting response
**use Like:**
$timeout(function(){ here your owl carousel function },10);
I have a bit of a complicated MVC project that we are adding some Angular capability to. I am very new to Angular and have watch three Angular courses on Pluralsight now. They have been very helpful but I am missing some piece of understanding.
I understand that I need to have just one ng-app (unless I want to bootstrap and I don't think I want to). So this app has defined my config and a custom directive. The custom directive is working nicely but when I click on a link in that directive it does not go anywhere....well perhaps it does but not where I am expecting. Fiddler shows nothing unusual like 404 or 500 errors.
(function ()
{
"use-strict";
angular.module("appMainNav", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/MySearch", {
controller: "routingController"
});
$routeProvider.otherwise({ redirectTo: "/" });
})
})();
My routingController:
(function () {
"use strict";
angular.module("appMainNav")
.controller("routingController", routingController);
function routingController($http) {
var vm = this;
alert("Routed");
}
})();
My HTML link as rendered:
Search
I don't get a page not found...the url just appends the #/MySearch. No console errors etc.
I was expecting to get a javascript alert...?
TIA
Edit
Should have added sooner. Here is markup:
_Layout page:
<body>
<div ng-app="appMainNav" ng-controller="routingController" class="container">
#RenderBody()
</div>
</body>
RenderBody is Index.cshtml:
<div class="row">
<div>
Header Stuff
</div>
</div>
<div class="row">
<div class="col-md-2">
<dashboard-main-nav></dashboard-main-nav>
</div>
<div class="col-md-3">
<div></div>
</div>
<div class="col-md-8">
<div></div>
</div>
</div>
<div class="row">
<div>
Footer Stuff
</div>
</div>
The custom directive angular code was left out of the snips above however that is where the link is generated.
You need to assign an event handler to a click event on the anchor tag:
Search
where foo is a function defined on the controller's scope:
function routingController($http, $scope) {
var vm = this;
$scope.foo = function(){
alert("I am so tired");
}
alert("Routed");
}
Try that and it should work.
I have a HTML page with different sections, which are loaded with AJAX. I have created a controller for each of the sections.
How is possible to bind the controller on a section which has been dynamically added on HTML?
I have found very complicated solutions, which i don't even know if they apply.
I need the most basic, easiest solution, something similiar with ko.applyBindings($dom[0], viewModel) for the ones who worked with KnockoutJs.
Index html
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container"><!-- load dynamic HTML here --></div>
</div>
</div>
Dynamic HTML
<div ng-controller="profile">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
Javascript:
var app = angular.module('app', []);
app.controller('profile', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
// load new HTML
// normally this is triggered by a link / button
$(function () {
$.get("/EditProfile/Profile", function (data, status) {
$("#container").html(data);
});
});
Don't use jQuery to embed html to your container. If you use jQuery, AngularJS can't track DOM manipulations and trigger directives. You can use ng-include directive of AngularJS.
In index.html file:
...
<div id="container">
<div ng-include="'/EditProfile/Profile'"></div>
</div>
...
If you want you can make that conditional:
...
<div id="container">
<div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div>
</div>
...
With that example, if you set profilePage variable to true, profile html will be load and render by ng-include.
For detailed info take a look to ngInclude documentation.
By the way, best practice to include views to your layout by triggering same link clicks is using routers. You can use Angular's ngRoute module or uiRouter as another popular one.
If you use ngRoute module, your index.html looks like that:
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container" ng-view><!-- load dynamic HTML here --></div>
</div>
</div>
And with a router configuration like below, profile html will be automatically loaded and rendered by ngRoute inside ngView directive:
angular.module('myapp', []).config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: '/EditProfile/Profile',
controller: 'ProfileController'
});
});
Here my controller file is
'use strict'
angular.module('app.maps.ctrls', [])
.controller('radCtrl', [
'$scope'
($scope) ->
$scope.radio=[
{value:1,select:true},
{value:2,select:false},
{value:3,select:false}
]
])
and the HTML mark up is
<div class="page">
<div class="panel panel-default">
<h4>Please choose the radio</h4>
<div ng-controller="radCtrl" ng-repeat="item in radio">
<input type="radio" ng-model="radio.value" name="value"/>
</div>
<label>Sample page</label>
have any idea? how to fix this issue
you are repeating item in radio. try ng-model="item.select"
here is an example that works: http://jsfiddle.net/tc8pp91u/