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>
Related
I've got an angular app I'm working on where I'm trying to auto fill a pop up modal based on a user's selection.
I thought I could use my model service to keep track of what the user selected and 'wire' the controller for the <select> list and it's edit button to the model but that doesn't seem to work.
Adding to the complexity I'm using angular-route and my <select> list is buried in a view. I was trying to keep my pop up modals in a separate controller outside the view because they've got their own templates and I had problems when I nested them into the view...
I've seen a few examples of wiring up angular apps and thought I understood them but I can't figure out what I'm doing wrong.
EDIT (thanks Pankaj Parkar for pointed out my mistakes in the plunker):
I have a plunker here:
https://plnkr.co/edit/6f9FZmV8Ul6LZDm9rcg9?p=preview
Below is the snipped in a single HTML page with CDN links :).
Am I just completely misunderstanding how angularjs is suppose to work?
<html ng-app="myApp">
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div ng-view></div>
<script id="editables.html" type="text/ng-template">
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple ng-model="model.selected">
<option ng-repeat="n in editables">{{n}}</option>
<select>
</div>
<a href="#editModal" class = "btn btn-info" data-toggle="modal" ng-click="edit()" >Edit</a>
</form>
</div>
</div><!--end container div-->
</script>
<div ng-controller="modalsController">
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="name" ng-model="formModel.name"></input>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-3 control-label">Description</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="desc" ng-model="formModel.desc"></input>
</div>
</div>
<div class="modal-footer">
<pre> {{ formModel | json }}<br><br>Working: {{ workingMap }}</pre>
Cancel
Continue
</div>
</form>
</div>
</div>
</div><!-- end modal -->
</div>
</body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src = "js/script.js"></script> -->
<script>
var app = angular.module('myApp', ['ngRoute']);
var modelService = function ($log){
var moduleHello = function(myMessage){
console.log("Module hellow from myService " + myMessage);
}
var moduleNames = {
"First" : {desc: "First's Description"},
"Second" : {desc: "Second's Description"},
"Third" : {desc: "Third's Description"}
};
var moduleWorkingName = {};
return {
hello: moduleHello,
editables: moduleNames,
workingName: moduleWorkingName
}
}//end modelService
app.factory("modelService", ["$log", modelService]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editables', {
controller: "editablesController",
templateUrl: "editables.html"
}).
otherwise({
redirectTo: "/editables"
});
}]);
app.controller('editablesController', ['$scope', '$log','modelService', function($scope,$log, $modelService) {
$scope.model = {};
//console.log( JSON.stringify( $modelService.editables ) );
$scope.editables = [];
for ( name in $modelService.editables){
$scope.editables.push( name );
}
$scope.edit = function(){
if ( typeof $modelService.editables [$scope.model.selected] != 'undefined'){
$modelService.workingName = $modelService.editables [$scope.model.selected];
console.log ("Setting my working name to " + JSON.stringify( $modelService.workingName ) );
}else{
console.log ("Nothing Selected");
}
}
}]);
app.controller('modalsController', ['$scope','modelService', function($scope,$modelService) {
$scope.formModel = {};
$scope.formModel.name = "Hard coding works of course";
$scope.formModel.desc = $modelService.workingName.desc; //But I can't seem to get this to update. I thought pointing it at an object in the Model would be enough.
console.log("Firing up modalsController");
}]);
</script>
</html>
I spent the last two days mulling over this in my head and I think I figured it out. For starters, here's the (working) plunker:
https://plnkr.co/edit/Kt3rebPtvGTt0WMXkQW4?p=preview
Now, the explanation. I was trying to keep a separate 'formModel' object that kept track of the controller's state. But that's both silly and pointless.
Instead what you're supposed to do is:
a. Create an object in your service to hold all your data (I just called this 'model')
b. For each controller that needs to share data create a variable on the $scope of the controller and point it to your 'model' variable from your service.
c. after that use the variables from your model in your html.
So in both my controllers you'll find this line:
$scope.model = $modelService.model;
and in my HTML you'll find stuff like this:
<input type="text" class="form-control" id="name" ng-model="model.workingName.name"></input>
notice how I'm using "model.workingName.name"? This references $scope.model.workingName.name, which thanks to the line $scope.model = $modelService.model from my JavaScript now points directly to my model.
And that is how you "wire up" Angular.
By the way, experienced Angular folks have probably noticed that this part:
$scope.editables = [];
for ( name in $modelService.model.names){
$scope.editables.push( name );
}
probably belongs in a directive instead of a controller because I'm editing the DOM.
Stuff like that's what makes it so hard to learn AngularJS. There's so many concepts to get the hang of.
Can anybody help me.
In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm.
main.htm, has included another page called filterApp.html.
I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded.
If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files.
Here is the code of the pages.
Thank you so much
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
Check this plunker link. Its working fine for me.
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
I'm pulling in data from an external site using this code -
<script>
var app = angular.module('myApp', ["ngSanitize"]);
app.controller('aLlCtrl', function($scope, $http) {
var url = 'https://www.hcrlaw.com/wp-json/posts?filter[category]=news_post&filter[posts_per_page]=30';
$http.get(url).then(function(data) {
$scope.data = data.data;
});
});
</script>
<div id="changingArea">
<body ng-app="myApp">
<!--SHOOTING TYPE-->
<div id="All" class="descshoot">
<div ng-controller="aLlCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<p>{{d.excerpt}}</p>
</div>
</div>
</div>
I's pulling in fine, but how can I get rid of tags such as <p> appearing? For example -
I've seen ways in which people use ng-sanitise but from what i understand you have to specify each piece of text you want to target and this would be really inconvenient as it's pulling in lots of posts from Wordpress,
Any help would be much appreciated, thanks!
I have an ionic & angular based project. I get variable node from a service. node's body value is HTML. But when I print {{node.body.und[0].value}} with ionic, it prints HTML codes with tags like <ul><li><strong>Title:</strong> some text</li><ul>
Controller and service part of the code:
.controller('NodeCtrl', function($scope, $stateParams, Node) {
$scope.node = Node.get({nid: $stateParams.nid});
});
.factory('Node', function ($resource) {
return $resource('some-domain.com/api/node/:nid'+'.json');
})
Ionic template:
<ion-view view-title="{{node.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h2>{{node.title}}</h2>
</div>
<div class="item item-body">
{{node.body.und[0].value}}
</div>
</div>
</ion-content>
</ion-view>
How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li><strong>Title:</strong> some text</li><ul>?
All Credits to Will.Harris!!
ng-bind-html, is what you are looking for.
From the Docs, use the ng-bind-html in the view as:
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
and in the controller, assign the scope variable with the html content as:
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}]);
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.