Geek Answers Handbook

Why are the changes made to $ scope to the directory link function not reflected in the user interface?

Carbon JS directives' the linkfunction of changing the parameters of the selection area is not reflected in the user interface.

Here is an example:

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        template: '<span>Title: {{myParams.title}}</span>',
        scope: {
            myParams: '='
        },
        link: function ($scope) {
            // the new value is not reflected in ui
            $scope.myParams.title = 'this is myDirective';
        }
    };
});

HTML:

 <div my-directive my-params="{title: 'this is title'}"></div>

I want the HTML page to display this is myDirective, but actually it this is title.

In addition, you could explain why it looks like this. Thanks

+4
source share
2 answers

, my-params="{title: 'this is title'}" . , 'title', . . Angular 1.4. , , , , :

<div ng-app="app" ng-controller="Ctrl as ctrl">
  <div my-directive my-params="{title: 'this is title'}"></div>
  <div my-directive my-params="data"></div>
</div>

( ).

Angular 1.2. , Angular :

VM1033 angular.js:9101 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"]]

, (.. my-params="{title: 'this is title'}"), ( 1.2, , ).

+5

link , directive. , myParams.title link ( )

my-params ( angular). , myParam.title .

, , ( ) link, , :

:

$scope.myparams = {title: 'this is title'};

:

<div my-directive my-params="myparams"></div>

:

.directive('myDirective', function () {
    return {
        restrict: 'A',
        template: '<span> Title: {{myParams.title}} </span>',
        scope: {
            myParams: '='
        },
        link: function ($scope,element) {
            // the new value is not reflected in ui

            element.click(function(){
                $scope.myParams.title = 'this is myDirective';
                $scope.$apply();
            })
        }
    };
});
0

More articles:


All Articles