angularjs指令 – 双向绑定Angularjs指令不工作

发布时间：2020-12-17 09:41:59 所属栏目：安全来源：网络整理

导读：我一直在试图找出解决方案,但我认为我是一个死胡同. 所以这是我的指示 directives.directive('postprocess',function($compile){ return { restrict : 'E',require: '^ngModel',scope: { ngModel: '=' },link: function(scope,element,attrs) { var parsed =

我一直在试图找出解决方案,但我认为我是一个死胡同.

所以这是我的指示

directives.directive('postprocess',function($compile)
{
    return {
        restrict : 'E',require: '^ngModel',scope: {
            ngModel: '='
        },link: function(scope,element,attrs) {
            var parsed = scope.ngModel;
            el = $compile(parsed)(scope);
            element.html("");
            //add some other html entities/styles.
            element.append(el);
            console.log(parsed);
        }  
    };
});

的html

<postprocess ng-model="some_model.its_property" style="padding-top: 10px;" />

在控制器的某处,我更新模型属性

some_model.its_property = 'Holla';

但是它不会更新相应的指令.它在加载时工作得很好,告诉我可能不是完全是一个范围问题.

这很简单,所以我已经删除了一些额外的代码.

请看下面的代码或工作Plunker：

<!doctype html>
<html lang="en" ng-app="myApp">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

    <script>
        var myApp = angular.module('myApp',[]);
        myApp.directive('postprocess',function ($timeout) {
            return {
                restrict : 'E',transclude: 'true',scope: {
                    myVariable: '='
                },attrs) {
                    $timeout(function () {
                        scope.myVariable = 'Bye bye!'
                    },200);
                }  
            };
        });

        myApp.controller('myAppCtrl',['$scope','$timeout',function ($scope,$timeout) {
            $scope.myVariable = {
                value : 'Holla'
            };

            console.log($scope.myVariable.value); // -> prints initial value
            $timeout(function () {
                console.log($scope.myVariable.value); // -> prints value after it is changed by the directive
            },2000);
        }])
    </script>

    </head>
    <body ng-controller="myAppCtrl">
        <postprocess my-variable="myVariable.value" style="padding-top: 10px;" />
    </body>
</html>

>控制器将初始值设置为“Holla”
>该指令通过my-variable属性接收该值
>使用双向数据绑定对scope.myVariable所做的任何更改更新主控制器的$scope.myVariable
>几秒钟之后$scope.myVariable更改为“再见”
看看你的console.log

$watch和$apply

Angular’s two-way data binding is the root of all awesome in Angular. However,it’s not magic,and there are some situations where you need to give it a nudge in the right direction.

When you bind a value to an element in Angular using ng-model,ng-repeat,etc.,Angular creates a $watch on that value. Then whenever a value on a scope changes,all $watches observing that element are executed,and everything updates.

Sometimes,usually when you’re writing a custom directive,you will have to define your own $watch on a scope value to make the directive react to changes.

On the flip side,sometimes you change a scope value in some code but the app doesn’t react to it. Angular checks for scope variable changes after pieces of your code have finished running; for example,when ng-click calls a function on your scope,Angular will check for changes and react. However,some code is outside of Angular and you’ll have to call scope.$apply() yourself to trigger the update. This is most commonly seen in event handlers in custom directives.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!