web-dev-qa-db-ja.com

Angular：ディレクティブからモデルを更新

私はここにフィドルを持っています： http://jsfiddle.net/KdkKE/44/

私がやりたいのは、「toggle」コンポーネントを作成することです。基本的にはカスタムチェックボックスですが、コントローラーのブール値にバインドされているtrueまたはfalseの場合に変更されるhtmlを使用します。

ユーザーがトグルをクリックすると、モデルが更新され、ディレクティブのビューが変更されます。これは、ディレクティブdoc http://docs.angularjs.org/guide/directive の最後にある例と似ていますが、起動時に正しくなるように状態がバインドされます。

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

function Ctrl($scope) {
    $scope.init = function() {
        $scope.foo = true
    }
}

 app.directive('toggle', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {
                label: '@',
                ngModel: '='
            },
            template: 
                '<div style="cursor: hand; cursor: pointer">{{label}}: {{ngModel}}</div>',
            link: function(scope, element, attrs, controller) {
                element.bind('click', function() {
                    scope.ngModel = false;
                    attrs.$set('ngModel', false);
                    console.log('plz', attrs.ngModel);
                });
            }
        };
    });

-

<div ng-app="App">
    <div ng-controller="Ctrl" ng-init="init()">
        <p>Foo in Ctrl: {{foo}}</p>  
        <toggle label="Foo" ng-model="foo"></toggle>
    </div>    
</div>
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-digest
10
kreek

$apply 。ここで動作することを確認してください： http://jsfiddle.net/4TnkE/

element.bind('click', function() {
    scope.$apply(function() {
        scope.ngModel = !scope.ngModel;
    });
});

また、次のように使用して、別の関数でのネストを回避することもできます。

element.bind('click', function() {
    scope.ngModel = !scope.ngModel;
    scope.$apply();
});
20
JayQuerie.com