Develop Reference

get ng-init value from scope

I want to get ng-init value from angular scope
controller
$scope.data={}
$scope.initvalue="myvalue";
Html
<input type="text" ng-model="data.value" ng-init="data.value= initvalue">
I want to set initvalue in input box and sent it to controller by ng-model(I want to able to modify this values so I need to make that)

Does this make sense?
http://jsfiddle.net/c7bsrenu/2/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data={}
$scope.initvalue="myvalue";
$scope.$watch('data.value', function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
});
}

You can try using using $watch. Please try this demo
eg :
<div ng-controller="yourController" >
<input type="text" id="demoInput" ng-model="demoInput" ng-init="demoInput='value'" />
</div>
code in controller
var yourController = function ($scope) {
console.log('demo');
$scope.$watch("demoInput", function(){
console.log($scope.demoInput);
},1000);
}

In html
<input type="text" ng-model="data.value" ng-init="setvalue()">
In controller
$scope.data ={}
$scope.initvalue="myvalue";
$scope.setvalue= function(){
$scope.data.value = $scope.initvalue;
}
This may help for you !

How to add new record to database with AngularJS and Laravel 5 on right way

I found a guide on how to write AngularJS the right way: https://github.com/johnpapa/angular-styleguide#factories
In Laravel, I created my POST route /api/addnew and now I need to pass params from Angular to Laravel.
This is my form:
<form id="1" class="dd animated slideInDown ng-pristine ng-valid">
<textarea class="form-control" placeholder="Vas Komentar" id="rep_text_0"></textarea>
Send
</form>
And my factory:
angular.module('commentsApp')
.factory('commentFactory', dataService);
dataSerive.$inject();
function dataService() {
var someValue = '';
var service = {
save: save,
someValue: someValue
};
return service;
////////////
function save() {
/* */
};
}
Click directive:
angular
.module('commentsApp')
.directive('addComment', addNewComment);
function addNewComment() {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
/* */
}
}
I'm stuck on how to pass details from the form to Angular and then make a post request on /api/addnew with the params?
Is there any way to use the click directive on a button to send params to the factory?

I don't think is necessary a directive for a click...
instead use ng-click and manage data (model) from the controller.
<div ng-controller="yourController">
<form id="1" class="dd animated slideInDown ng-pristine ng-valid">
<textarea class="form-control" placeholder="Vas Komentar" id="rep_text_0" ng-model="yourCommentModel"></textarea>
Send
</form>
</div>
In your controller you can use $http or your own factory.
yourApp.controller('yourController', function($scope, $http, yourFactory){
$scope.sendText = function(data){
//http code...
//or yourFactory code..
};
});

Angularjs Pass all attributes on a directive to the view

I'm building a tiny angular directive <my-input> on top of a normal HTML <input>.
And because this is going to be available in a framework, I need to allow people to pass whichever attribute they might use from the directive to the input element. For example:
<my-directive disabled="disabled" type="email">
would render
<input disabled="disabled" type="email">
I know that if I have a static list of attributes, I can manually do it.. but the problem is I can't predict what attributes will be added.. so I'm looking for a solution that passes all the attributes from the directive to the input element.
Thanks

If you want to pass multiple attributes to the view, you can perform it into the link function.
Here is your directive :
Directive
(function(){
function myInput($compile) {
return{
restrict: 'E',
templateUrl: 'template.html',
link: function(scope, elm, attrs){
//Convert camelCase to dash
function toDash(str) {
return str.replace(/\W+/g, '-')
.replace(/([a-z\d])([A-Z])/g, '$1-$2');
}
//Retrieve input into the template
var input = angular.element(document.querySelector('#myInput'));
//Loop on attrs
for (var key in attrs) {
if (key[0] !== '$'){
//Remove all attribute to the top level element
elm.removeAttr(toDash(key));
//Add our attribute to the input
input.attr(toDash(key), attrs[key]);
//Compile and link it to the scope
$compile(input)(scope);
}
}
}
};
}
angular
.module('app')
.directive('myInput', myInput);
})();
With the template :
template.html
<input type="text" id="myInput">
For example, in a controller you can set some variable :
Controller
(function(){
function Controller($scope) {
$scope.show = true;
$scope.toto = 'Hello !!'
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
And call your directive :
<body ng-app="app" ng-controller="ctrl">
<my-input disabled="disabled" ng-model="toto" ng-show="show"></my-input>
</body>
So it will remove all attributes to the my-input element, and set it into your template.

Setting data-ng-model in angular

I want to set an data-ng-model variable from a controller, but i get this error: TypeError: Cannot set property 'name' of undefined
here is the html : <input id="1" data-ng-model="name" type="text">
and the controller : $scope.name="5656";
this changes the text of the input, but not the data-ng-model="name" variable (whcich is what i need)
$('#1').val("hello");
update- controller defenition:
editApp.controller('EditController', function ($scope,$http, $routeParams, customersService,$location) {
...
});

This might be the best thing I can do to help!
http://jsfiddle.net/vcy80edg/
var editApp = angular.module('myApp',[]);
function EditController($scope) {
$scope.name = 'Hey friend!';
}

changing variable value from another controller

I've created an application in angular js. In the application i'm having three controllers. The first controller MainController is in the body tag, within which i have another two controller FileController and TypeController.
Inside the TypeController I've a select box having the model name data.selectedFileTypes which shows several filenames. Now within the FileController controller I've another select box with model name fileproperty.allowsFiles, and having Yes and No values. The first time it get initialized within the FileController controller.
But when i select a different file from the select of the model data.selectedFileTypes how can i change the select value again to No of the model fileproperty.allowsFiles from the ng-change function of the file select
an anyone please tell me some solution for this
html
<body ng-controller="MainController">
:
:
<div ng-controller="TypeController">
<select ng-model="data.selectedFileTypes" ng-options="type.name for type in config.fileTypes ng-change="select()">
</select>
</div>
:
:
<div ng-controller="FileController">
<select ng-model="fileproperty.allowsFiles" ng-options="option.value as option.desc for option in files.options"></select>
</div>
:
:
</body>
script
app.controller('TypeController', function($rootScope, $scope)
{
$scope.select = function()
{
:
:
}
}
app.controller('FileController', function($rootScope, $scope)
{
$scope.fileproperty.allowsFiles = 'No';
}

Try this method.
app.controller('MainController', function($rootScope, $scope)
{
$scope.select = function()
{
:
$rootScope.selectedFiles = $scope.data.selectedFileTypes;
:
}
}
Inside your second controller
app.controller('FileController', function($rootScope, $scope)
{
$scope.$watch('selectedFiles', function () {
$scope.fileproperty.allowsFiles = 'No';
}, true);
}
You could also use $broadcast and $on here to handle this scenario:
app.controller('MainController', function($rootScope, $scope)
{
$scope.select = function()
{
$scope.$broadcast('someevent');
}
}
Inside your second controller
app.controller('FileController', function($rootScope, $scope)
{
$scope.$on('someevent', function () {
$scope.fileproperty.allowsFiles = 'No';
});
}

I think it's better practice to put shared properties into a service, then inject the service in both controllers.
Doesn't seem right to abuse a global namespace such as $rootScope when you don't have to.
Here's an example of a single service being bound to a select in one controller's scope and the same service being used in a second controller's scope to display the value in the service.
Here's a codepen: http://cdpn.io/LeirK and the snippets of code below
Here's the HTML:
<div ng-app="MyApp">
<div ng-controller="MainController">
<select ng-model='fileproperties.allowFiles'>
<option id="No">No</option>
<option id="Yes">Yes</option>
</select>
<div ng-controller="FileController">
{{fileproperties.allowFiles}}
<div>
</div>
</div>
And the Javascript:
var app = angular.module('MyApp',[]);
app.controller('MainController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
scope.fileproperties = fileproperties;
}]);
app.controller('FileController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
scope.fileproperties = fileproperties
}]);
app.service('FilePropertiesService', function(){
this.allowFiles = 'No';
});