I am in the process of learning how to make custom directives in AngularJS.
I have this simple program that works well and I would like to refactor it into a custom directive. I would like the directive element to be the div that is a child of the body tag. I am having trouble imagining how the slider values would be passed up and down the DOM from the input tags to the div and the other way around.
Code:
<html ng-app="DualSlidersApp">
<head>
<meta charset="UTF-8">
<title>DualSlidersApp</title>
<style>
.indented { margin-left: 61px; }
</style>
<script src="js/angular.js"></script>
<script>
'use strict';
var app = angular.module('DualSlidersApp', []);
app.controller('DualSlidersController', ['$scope', function($scope) {
$scope.firstRangeSliderValue = 10;
$scope.secondRangeSliderValue = 20;
$scope.reconcileSliders = function reconcileSliders(drivenByWhichSlider) {
if ($scope.firstRangeSliderValue > $scope.secondRangeSliderValue) {
if (drivenByWhichSlider === 'drivenByTheFirstSlider') {
$scope.secondRangeSliderValue = $scope.firstRangeSliderValue;
} else {
$scope.firstRangeSliderValue = $scope.secondRangeSliderValue;
}
}
}
}]);
</script>
</head>
<body ng-controller="DualSlidersController">
<div>
<table>
<tr>
<td>
<input type="range" min="10" max="30" step="2"
ng-model="firstRangeSliderValue"
ng-change="reconcileSliders('drivenByTheFirstSlider');">
</td>
<td>{{ firstRangeSliderValue }}</td>
</tr>
<tr>
<td>
<input type="range" min="20" max="40" step="2" class="indented"
ng-model="secondRangeSliderValue"
ng-change="reconcileSliders('drivenByTheSecondSlider');">
</td>
<td>{{ secondRangeSliderValue }}</td>
</tr>
</table>
</div>
</body>
</html>
I'd assume you meant sharing data between the directive and the controller when you wrote "how the slider values would be passed up and down the DOM from the input tags to the div and the other way around".
Binding is probably the best use of angular that you can implement here. bind 2 variables from the controller's scope to the directive's scope, each one represents the value of each slider. I would also suggest to pass a function to the directive's scope as well, so the ng-change would be calledback in the controller. It should look something like this:
directive.js
app.directive('dualSlidersDirective', function() {
return {
scope: {
sliderOneValue: '=',
sliderTwoValue: '=',
onSliderChange: '&'
},
templateUrl: 'directive.html'
};
});
directive.html:
<div>
<table>
<tr>
<td>
<input type="range" min="10" max="30" step="2"
ng-model="sliderOneValue"
ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheFirstSlider\'})">
</td>
<td>{{ sliderOneValue }}</td>
</tr>
<tr>
<td>
<input type="range" min="20" max="40" step="2" class="indented"
ng-model="sliderTwoValue"
ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheSecondSlider\'})">
</td>
<td>{{ sliderTwoValue }}</td>
</tr>
</table>
</div>
And don't forget to bind the relevant variables and function from your controller's scope in the main html, notice that functions receive their arguments as a hash (the key being the name of the parameter and the value being the value of it). it is very important to keep the same names of the variables throughout the script
So the entire thing should look something like this:
<html ng-app="DualSlidersApp">
<head>
<meta charset="UTF-8">
<title>DualSlidersApp</title>
<style>
.indented { margin-left: 61px; }
</style>
<script src="js/angular.js"></script>
<script>
'use strict';
var app = angular.module('DualSlidersApp', []);
app.controller('DualSlidersController', ['$scope', function($scope) {
$scope.firstRangeSliderValue = 10;
$scope.secondRangeSliderValue = 20;
$scope.reconcileSliders = function reconcileSliders(drivenByWhichSlider) {
if ($scope.firstRangeSliderValue > $scope.secondRangeSliderValue) {
if (drivenByWhichSlider === 'drivenByTheFirstSlider') {
$scope.secondRangeSliderValue = $scope.firstRangeSliderValue;
} else {
$scope.firstRangeSliderValue = $scope.secondRangeSliderValue;
}
}
}
}]);
app.directive('dualSlidersDirective', function() {
return {
scope: {
sliderOneValue: '=',
sliderTwoValue: '=',
onSliderChange: '&'
},
template:
'<div>' +
'<table>' +
'<tr>' +
'<td>' +
'<input type="range" min="10" max="30" step="2"' +
'ng-model="sliderOneValue"' +
'ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheFirstSlider\'})">' +
'</td>' +
'<td>{{ sliderOneValue }}</td>' +
'</tr>' +
'<tr>' +
'<td>' +
'<input type="range" min="20" max="40" step="2" class="indented"' +
'ng-model="sliderTwoValue"' +
'ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheSecondSlider\'})">' +
'</td>' +
'<td>{{ sliderTwoValue }}</td>' +
'</tr>' +
'</table>' +
'</div>'
};
});
</script>
</head>
<body ng-controller='DualSlidersController'>
<dual-sliders-directive slider-one-value='firstRangeSliderValue' slider-two-value='secondRangeSliderValue' on-slider-change='reconcileSliders(drivenByWhichSlider)'></dual-sliders-directive>
</body>
</html>
Related
I am working on a sample app using angularJS.
I have a service which returns JSON object, I am trying to bind the response to a table.
Controller -
(function () {
var app = angular.module('searchApp', []);
app.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['http://localhost:11838/SearchProfiles/get']);
});
var controller = app.controller('searchController', ["$scope", "$http", function ($scope, $http) {
$scope.profileName = "";
$http.get("http://localhost:11838/SearchProfiles/GetAllRuleSets")
.then(function (response) {
$scope.ruleSets = response.data;
});
$scope.searchProfiles = function () {
$http.get("http://localhost:11838/SearchProfiles/GetProfiles?profileName=" + $scope.profileName
+ "&ruleSetName=" + $scope.selectedRuleSet)
.then(function (response) {
$scope.showProfiles = true;
$scope.profiles = response.data;
console.log($scope.profiles);
});
};
$scope.clearForm = function () {
$scope.profileName = "";
$scope.selectedRuleSet = "";
};
}]);
})();
cshtml -
#{
ViewBag.Title = "Search Profiles";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search Profiles</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
#Scripts.Render("~/Scripts/angular")
#Styles.Render("~/Content/css/scss")
</head>
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
</div>
<div ng-controller="searchController" id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</body>
I am getting back following response -
[{"ProfileName":"Profile3","CreationDate":"1/9/2017"},{"ProfileName":"Profile4","CreationDate":"12/30/2016"}]
but even after setting $scope.profiles I am not seeing table on UI.
I'm fairly new to angular, am I missing something obvious.
Any help is appreciated.
The problem is that you are fetching the data in one scope (the div content where you declare ng-controller="searchController") and then trying to
view the data in another scope (the div profilesDiv where you again declare the ng-controller="searchController").
To solve the problem you need to remove ng-controller="searchController" from the profilesDiv and move the profilesDiv inside the content div.
Like this:
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
<div id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</div>
</body
I have an angular app, and an index.html with an ng-view that renders to different views partials/persons.html and partials/newPerson.html.
when i add a new person to the $scope.persons in my controller via the newPerson.html the $scope.persons is updated, but it dosn´t updated the table in the partials/persons.html. if i copy/paste the table into partials/newPerson.html the table is updated automatically. I cant seem to wrap my head around why? they are using the same controller...?
thank´s in advance for your help :)
js/app.js
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/persons',{
templateUrl:'partials/persons.html',
controller:'PersonCtrl'
})
.when('/newperson',{
templateUrl:'partials/newPerson.html',
controller:'PersonCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('PersonCtrl',['$scope', function($scope){
var persons = [
{
id: 1
,name: "Jens",
age : 18}
,{
id: 2,
name: "Peter",
age : 23
}
,{
id: 3
,name: "Hanne"
,age : 23
}
];
$scope.persons = persons;
$scope.nextId = 4;
$scope.savePerson = function(){
if($scope.newPerson.id === undefined)
{
$scope.newPerson.id= $scope.nextId++;
$scope.persons.push($scope.newPerson);
}else{
for (var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].id === $scope.newPerson.id){
$scope.persons[i] = $scope.newPerson;
break;
}
}
}
$scope.newPerson = {};
};
index.html
<html ng-app="app" ng-controller="PersonCtrl">
<head>
<title>Routing</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<script src="angularSrc/app.js"></script>
</head>
<body>
<br>
<div class="container">
<header>
<h1>People Routing</h1>
<nav>
persons
new person
</nav>
</header>
<div ng-view="ng-view">
</div>
</div>
</body>
partials/persons.html
<h3>Persons</h3>
<table >
<thead>
<tr>
<td>Id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons">
<td>{{p.id}} </td>
<td>{{p.name}} </td>
<td>{{p.age}} </td>
</tr>
</tbody>
</table>
partials/newPerson.html
<div >
<h1>New person</h1>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<input type="text" ng-model="newPerson.name" model="newPerson.name" class="form-control" id="year" placeholder="name">
</div>
<div class="form-group">
<input type="number" ng-model="newPerson.age" model="newPerson.age" class="form-control" id="age" placeholder="age">
</div>
</fieldset>
</form>
<button type="submit" ng-click="savePerson()" >Save</button>
<h2>nextId: {{nextId}}</h2>
</div>
The problem is that you aren't realizing that each use of controller creates new instance.
The scope is destroyed when you leave a controller so if you add to the scope in one instance , that change will be lost when you load controller again on your other route.
You need to use a service to persist the data during the life of each page load.
Simple service example:
app.factory('PersonService', function () {
var persons = [{
id: 1,
name: "Jens",
age: 18
}, {
...
}, {
...
}];
return {
persons: persons
}
});
Then inject in controller and use the service data in controller
app.controller('PersonCtrl',['$scope','PersonService', function($scope,PersonService){
$scope.persons = PersonService.persons;
I have few text boxes and would like to implement the simple calculation like:
Value of (TextBox1 + TextBox2 + textBox3) = Value of TextBox4.
(TextBox4 + TextBox5)= value of TextBox6
How can achieve this in AngularJS?
See below for an example:
<table ng-app="" ng-controller="acadController">
<tr ng-repeat="x in semone">
<td>{{ x.SubjectName }}</td>
<td>{{ x.Credit }}</td>
<td><input type="number" ng-model="pt1" /></td>
<td><input type="number" ng-model="pt2"/></td>
<td><input type="number" ng-model="ia"/></td>
<td><input type="number" value="{{pt1+pt2+ia}}" ng-model="semMarks" class="marks_catotal" /></td>
<td><input type="number" ng-model="endSemMarks" class="marks_endsem" /></td>
<td><input type="text" class="marks_total" value="{{ semMarks + endSemMarks }}"/></td>
</tr>
<table>
You can use use $scope.watch to watch those variables and their sum and if it changes add it to $scope.marks
$scope.$watch('pt1 + pt2', function(v) {$scope.marks = v;});
See this plnkr: http://embed.plnkr.co/p0rQkUBMfEmYZkKh4Nrt/
You can use the $watch function to react to user changes :
Inside your controller, you can fire a function when a value is modified.
function calculateResult(){
$scope.semMarks = $scope.pt1 + $scope.pt2 + $scope.ia;
}
$scope.$watch('pt1', calculateResult);
$scope.$watch('pt2', calculateResult);
Instead of your watch, you could also have registered a function that will be fired directly when you modify a value :
$scope.calculateResult = calculateResult;
And then, inside your view, you would just have to call this function when an input is modified.
<td><input type="number" ng-model="pt2" ng-change="calculateResult()"/></td>
Most of the time, using an event consumes less processor than using a $watch. Angular evaluates every $watch and check if there were any changes during each $digest cycle. Angulars uses also a lot of $watches itself, so adding too much $watches can significally decrease performances.
Consider introducing a controller for endSemMarks and marks_total.
You should simply bind to a function that evaluates the sum of the values. As mentioned above, $watch is more expensive and a little harder to understand.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.tb1 = 0;
$scope.tb2 = 0;
$scope.tb3 = 0;
$scope.tb5 = 0;
$scope.sum123 = function() {
return $scope.tb1 + $scope.tb2 + $scope.tb3;
}
$scope.sum45 = function() {
return $scope.tb1 + $scope.tb2 + $scope.tb3 + $scope.tb5;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div>1 :
<input type="number" ng-model="tb1">
</div>
<div>2 :
<input type="number" ng-model="tb2">
</div>
<div>3 :
<input type="number" ng-model="tb3">
</div>
<div>4 :
<input type="number" ng-value="sum123()">
</div>
<div>5 :
<input type="number" ng-model="tb5">
</div>
<div>6 :
<input type="number" ng-value="sum45()">
</div>
</body>
I need to add a custom directive to my code, but every time I add it, it breaks my code. I checked the console and is giving me the following error
Error: Argument 'guessGameController' is not a function, got undefined
at Error (native)
Now I am not sure if I am not setting my code right or if I am not adding the directive where is supposed to go. Here is my code, I appreciate all the help.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="guessGameApp">
<head>
<title>Word Game 2.0 - AngularJS</title>
<!--Encoding-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- JQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!--Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="js/controllers/app.js" type="text/javascript"></script>
<script src="js/controllers/maincontroller.js" type="text/javascript"></script>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/magicWord.css">
<!--<script src="js/jquery-1.11.0.min.js"></script>-->
</head>
<body>
<div ng-controller="guessGameController">
<p>
<header id="masthead">
<h2 align="center">{{appTitle}}</h2>
</header>
</p>
<div ng-controller="wordController">
<p>
<table align="center" width="300px" height="150px" border="solid 2px">
<tr>
<td id="guessBox">
<p align="center">
<input value="" type="text" id="guestGuess" placeholder="Enter Guess" ng-model="guestGuess"/>
</p>
<p align="center"><button ng-click="addGuess()" id="guessButton">Click to Check</button></p>
</td>
</tr>
<tr>
<td>
<h3 align="center">Your guesses so far are: </h3>
<p align="center" ng-repeat="words in guesses">{{words}}</p>
</td>
</tr>
<tr>
<td>
<p align="center">You have guessed:<b>{{guessed}}</b> times out {{allowed}} chances.</p>
<p align="center">You have <b>{{allowed - guessed}}</b> guesses left.</p>
</td>
</tr>
<tr>
<td>
<a custom-button>Click me</a>
<br />
<button custom-button>Hello</button>
</td>
</tr>
</table>
</p>
</div>
</div>
</body>
</html>
app.js
var gameApp = angular.module('guessGameApp', []);
var gameTemplate = angular.module('guessGameApp', []);
maincontroller.js
gameApp.controller("guessGameController", function($scope)
{
$scope.appTitle = "WELCOME TO THE GUESS GAME!";
});
gameApp.controller('wordController', function($scope)
{
$scope.guess = '';
$scope.guesses = [];
$scope.guessed= '';
$scope.allowed = 6;
$scope.wordToGuess = "Just";
$scope.pushGuess = function () {
$scope.guesses.push($scope.guestGuess);
$scope.guessed = $scope.guesses.length;
$scope.resetGuess();
}
$scope.resetGuess = function() {
$scope.guestGuess = '';
}
$scope.addGuess = function()
{
if ($scope.guestGuess == null || $scope.guestGuess == '')
{
$("input[type=text]").ready(function () { $("#guestGuess").addClass("blur"); });
$scope.result = " Please enter a guess\n\nDon't leave the box empty.";
alert($scope.result);
}
else if ($scope.guestGuess.toLowerCase() == $scope.wordToGuess.toLowerCase())
{
$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
$scope.pushGuess(guestGuess);
$scope.result = "You have guessed the correct word. Way to go!\n\n\t\t The word was: ";
alert($scope.result + $scope.wordToGuess);
}
else if ($scope.guestGuess != $scope.wordToGuess & ($scope.allowed - $scope.guessed) > 1)
{
$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
$scope.pushGuess(guestGuess);
$scope.result = "Please try again!";
alert($scope.result);
}
else if (($scope.allowed - $scope.guessed) <= 1)
{
$("input[type=text]").ready(function () { $("#guestGuess").addClass("doneBlur"); });
$scope.guesses.push($scope.guestGuess);
$scope.guessed = $scope.guesses.length;
$scope.result = "Game over! The word was: ";
alert($scope.result + $scope.wordToGuess);
}
$scope.guess = '';
}
});
gameApp.directive('customButton', function ()
{
$scope.wordToGuess = "Just";
return {
restrict: 'A',
replace: true,
transclude: true,
templateUrl: '../../templates/customTemplate.HTML',
link: function (scope, element, attrs)
{
element.bind("click",function()
{
alert("The value of 'guessWord' is " + scope.wordToGuess);
})
}};
});
customTemplate.html
<a href="" class="myawesomebutton" ng-transclude>
<i class="icon-ok-sign"></i>
</a>
In app.js remove the second module declaration
var gameApp = angular.module('guessGameApp', []);
//var gameTemplate = angular.module('guessGameApp', []); --> remove this line
You are also modifying DOM from the controller, this is not the angular way. If you want to add classes when some condition occurs, then have a look at ng-class
I have the following simple CRUD based code (most taken from the AwesomeTodo tutorial).
It's one html file, just a grid, and when create() is called, I expect the UI to update.
THIS APP WORKS! It just doesn't refresh the view when i create new records, I have to refresh the browser which obviously reloads the resource.
<div id="apps-table" compile="html">
<table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Label</th>
<th>Description</th>
<th>Status</th>
<th>Location</th>
<th><a ng-click="promptForNew()"><li class="icon-plus"></li> New App</a></th>
</tr>
</thead>
<tbody>
<tr style="display:none" id="add-app-row">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
</td>
</tr>
<tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
<a class="btn btn-small btn-danger" ng-click="delete()"><i class="icon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
var AdminApp = angular.module("AdminApp", ["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: AppCtrl, templateUrl: 'applications.html' }).
otherwise({ redirectTo: '/' });
});
AdminApp.factory('App', function($resource) {
return $resource('/rest/system/app/:id/?app_name=admin', {}, { update: { method: 'PUT'}});});
var AppCtrl = function ($scope, App) {
$scope.Apps = App.get();
$scope.formChanged = function(){
$('#save_' + this.app.fields.id).removeClass('disabled');
};
$scope.promptForNew = function(){
$('#add-app-row').show();
};
$scope.save = function () {
var records = {};
var record = {};
record.fields = this.app.fields;
delete record.fields.name;
records.record = record;
var id = this.app.fields.id;
App.update({id:id}, records, function () {
$('#save_' + id).addClass('disabled');
});
};
$scope.create = function() {
var currentScope = $scope;
var records = {};
var record = {};
record.fields = this.app.fields;
records.record = record;
App.save(records, function() {
$('#add-app-row').hide();
});
};
$scope.delete = function () {
var id = this.app.fields.id;
App.delete({ id: id }, function () {
$("#row_" + id).fadeOut();
});
};
};
Here is the index.html:
<!DOCTYPE html>
<html ng-app="AdminApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="/lib/web-core/js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/resource.js"></script>
<script src="/lib/web-core/js/jquery.js"></script>
<script src="/lib/web-core/js/bootstrap.min.js"></script>
</body>
</html>
All my actions are through ng-click, so I dont appear to be doing anything "outside Angular"
Question is, is this code working as it should? Or should it actually update?
Only way i can update scope is manually using :
$scope.Apps.record.push($scope.app);
thats hideous. Cant use apply or digest, nor should I have to.
Glancing through your code and the jsFiddle, I've come across the following issues so far:
The framework loading needs to be set to "no wrap (head)" instead of "onLoad" in the jsFiddle settings
The ngApp directive is not used anywhere to bootstrap the application
There is an ngController directive specifying the AppCtrl controller, but that controller isn't registered with the application module using module.controller (it's just a free-standing variable)
The controller functions invoked via ngClick use jQuery to manipulate the DOM--not only is this a big no-no in Angular (use directives, not controllers, for your DOM manipulation), but the jQuery library isn't even included in the jsFiddle.