如何更改函数中的angularjs元素值？

Question

HTML:

<div data-ng-app="story"  data-ng-init="detail='post a 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="Post 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 updateArticle(data) {
    console.log('updateArticle called '+data);

how to change the value here?

    $rootScope.title = 'hidfg';
}

app.controller('detail_controller', function($scope) {


    $scope.detail_dashboard = {
        show : false
    };

    $scope.submit_detail = function($value) {

        $scope.detail_dashboard = {
            show : true
        };

        $scope.title = $value;

        updateArticle($value);

    };



});

$scope and $rootScope give this error when used inside updateArticle function:

ReferenceError: `$rootScope` is not defined

How to change any element value inside a controller? In jQuery, simply call the element by name, id, class and data attribute. But angular how can I do that?

I tried this way as well:

angular.element('title').text(''something new);

But that gave me jqLite:nosel error

Fiddle: https://jsfiddle.net/hadfgy4r/

Answer 1

This is the answer you're looking for: https://jsfiddle.net/27pawemr/2/

       var app = angular.module("story", []);
     //You can't do this, because you're out of the "Angular consciousness"
      /*function updateDashboard(data) {
          console.log('updateArticle called '+data);
           $rootScope.title = 'hidfg';
       }*/

       app.service("myModifier", ["$rootScope", function($rootScope) {
            this.updateDashboard = function(data) {
               console.log('updateArticle called ' + data);
              $rootScope.title = 'hidfg';
           };
    }]);

     app.controller("detailController", ["$scope", "myModifier", function($scope, myModifier) {
     $scope.detail = "post a story here";

     $scope.detailDashboard = {
        show: false
    };

   $scope.submit_detail = function(value) {
      //There's no need to redeclare $scope.detailDashboard
      $scope.detailDashboard.show = true;

      $scope.title = value;

       myModifier.updateArticle(value);

  };



}]);

Also there's an error in your HTML. The ng-model works only for inputs!

<div><h1 class="title">detail: {{title}}</h1></div>
    <div data-posted-answers></div>
</div>

So it doesn't make any sense to put an ng-model here

<div><h1 class="title">detail: {{title}}</h1></div>

Answer 2

it seems like scope() and $apply needed to be used like this. But I need to include jquery for this. If below code can be modified without jquery, do let me know.

function updateArticle(data) {
var scope = angular.element($("#pquestion")).scope();
    scope.$apply(function(){

        scope.detail_dashboard= {
            show : true
        };

        scope.title= data;
    });
}