HTML:
<div data-ng-app="story" data-ng-init="detail='share your story here'">
<div data-ng-controller="detail_controller">
<input type="text" name="detail" data-ng-model="detail">
<h1>{{detail}}</h1>
<input data-ng-click="submit_detail(detail)" type="submit" name="submit_detail" value="Share detail">
<!--detail dashboard-->
<div ng-model = "detail_dashboard" data-ng-show = "detail_dashboard.show">
<div><h1 data-ng-model = "title" class="title">detail: {{title}}</h1></div>
<div data-posted-answers></div>
</div>
</div>
</div>
Angular js
var app = angular.module('story', []);
function addNewStory(data) {
console.log('addNewStory called '+data);
how can I update the value in this function?
$rootScope.title = 'new value';
}
app.controller('detail_controller', function($scope) {
$scope.detail_dashboard = {
show : false
};
$scope.submit_detail = function($value) {
$scope.detail_dashboard = {
show : true
};
$scope.title = $value;
addNewStory($value);
};
});
$scope and
$rootScopegive an error when used insideaddNewStory()function:
ReferenceError: `$rootScope` is not defined
How do I change the value of any element within a controller? In jQuery, you simply target the element by its name, id, class or data attribute. But in AngularJS, how can I achieve that?
I also attempted this method:
angular.element('title').text('something new');
But it resulted in a jqLite:nosel error
Fiddle: https://jsfiddle.net/hadfgy4r/