how to binding one way angular and binding again when model change?

Question

There are any solution or angular plug-in to do binding one way and binding again when model is change? Now I'm using plug-in bind-once , But it just binding on first time and then it destroy watcher. Example:

    <div bindonce="model"><span bo-bind="model.title"></span></div>

How would that be different from the default angular binding? — JB Nizet, Oct 30 '14 at 16:27
Yes it has. default binding angular create $wacher to do that. But I don't need 2 way bingding. Follow [The Top 10 Mistakes AngularJS Developers Make Read more at](http://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make#9U3jm6lYtjKrRUcc.99) — Hai Bui, Oct 31 '14 at 02:29
rerender the page, remove it from dom and then add it again.. using ng-if — harishr, Oct 31 '14 at 04:02
It's not two-way. It would be two-way if you had an input allowing to modify the model. What you have there is a view watching for changes in the model, and not vice-versa. And since you want the view to update each time the model changes, that's what Angular does natively. If you're afraid of performance problems with thousands of such bindings in a single page, then dont have thousands of such bindings in a single page. Make the page simpler. — JB Nizet, Oct 31 '14 at 06:50
To support @JBNizet comment that angularjs by default already did one way binding. Refer to http://www.angularjshub.com/examples/basics/onewaydatabinding/ — hutingung, Oct 31 '14 at 07:11

score 3 · Answer 1 · answered Oct 30 '14 at 16:28

3

Angular already does this for you

<div><span ng-bind="model.title"></span></div>

or

<div><span>{{model.title}}</span></div>

answered Oct 30 '14 at 16:28

but this create binding 2 way. As you know if the page have sevaral thousands records it make page very slow. So that I find solution for removing $watcher. – Hai Bui Oct 31 '14 at 02:24

score 0 · Answer 2 · answered Oct 31 '14 at 06:49

how you can do it is: re-redner(ng-if) the page on change of certain variable. what would happen is, the dom would be removed, and added again, which it is being added again : angular should bind the variable to its current value, so this way you get to keep bind-once and also update the value as per your need.

only caveat is, you would need an indicator for DOM on when to reload.

you can use the reload directive below(which I am using in my app):

csapp.directive("csReloadOn", ["$timeout", "Logger", function ($timeout, logManager) {

    var $log = logManager.getInstance("csReloadOn");

    var getTemplate = function () {
        return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>';
    };

    var linkFunction = function (scope, element, attrs) {
        scope.doRefreshPageOnModeChange = true;

        scope.$watch(attrs.csReloadOn, function (newVal, oldVal) {
            if (newVal === oldVal) return;
            $log.info("changed mode from : " + oldVal + ", to : " + newVal);
            scope.doRefreshPageOnModeChange = false;
            $timeout(function () { scope.doRefreshPageOnModeChange = true; }, 100);
        });
    };

    return {
        restrict: 'A',
        transclude: true,
        template: getTemplate,
        link: linkFunction
    };
}]);

how to binding one way angular and binding again when model change?

2 Answers2