Diğer kumanda dan Direktif denetleyicisi yöntemi AngularJS

SORU

14 ŞUBAT 2013, PERŞEMBE

Diğer kumanda dan Direktif denetleyicisi yöntemi AngularJS

Anlamaya çalışıyorum ama google siz burada soracağım arkadaşım bugün değil gibi görünüyor. Temelde kendi denetleyicisi olan bir Direktif var. Aşağıdaki kodu bakın:

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

popdown.directive('popdown', function () {
    var PopdownController = function ($scope) {
        this.scope = $scope;
    }

    PopdownController.prototype = {
        show:function (message, type) {
            this.scope.message = message;
            this.scope.type = type;
        },

        hide:function () {
            this.scope.message = '';
            this.scope.type = '';
        }
    }

    var linkFn = function (scope, lElement, attrs, controller) {

    };

    return {
        controller: PopdownController,
        link: linkFn,
        replace: true,
        templateUrl: './partials/modules/popdown.html'
    }

});

Bu hata/bildirimler/uyarılar için bildirim sistemi olması gerekiyordu. Yapmak istediğim şey başka bir denetleyici (Direktif) fonksiyonu bu kumanda üzerinde göstermek aramak. Ve bunu yaptığımda da istediğim bağlantım bazı özellikleri değiştirilen algılamak ve bazı animasyonlar gerçekleştirmek için işlev.

İşte istediğim örneklemek için bazı kod:

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

app.controller('IndexController', function($scope, RestService) {
    var result = RestService.query();

    if(result.error) {
        popdown.notify(error.message, 'error');
    }
});

Yani popdown Yönerge denetleyicisinde show çağrılırken bağlantı işlevi de tetiklemiş olmalı ve bir animasyon gerçekleştirmek. Bunu nasıl elde edebilirim?

CEVAP

14 ŞUBAT 2013, PERŞEMBE

Bu ilginç bir soru, ve böyle bir şey uygulamak istiyorum nasıl düşünmeye başladım.

this (fiddle); ile geldim

Temelde, bir kontrolör, bir Direktif aramak için çalışmak yerine, bir modül tüm popdown mantığı evine yarattım:

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

Modülü, herhangi bir yere enjekte edilebilir API için factory ve gerçek popdown elemanın davranışını tanımlamak için: directive iki şey bıraktım

Fabrika sadece fonksiyonları success error birkaç tanımlar ve değişken: bir çift izler

PopdownModule.factory('PopdownAPI', function() {
    return {
        status: null,
        message: null,
        success: function(msg) {
            this.status = 'success';
            this.message = msg;
        },
        error: function(msg) {
            this.status = 'error';
            this.message = msg;
        },
        clear: function() {
            this.status = null;
            this.message = null;
        }
    }
});

Direktif API denetleyicisi içine alır, ve değişiklikler (kolaylık sağlamak için bootstrap css kullanıyorum): apı saatler

PopdownModule.directive('popdown', function() {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        controller: function($scope, PopdownAPI) {
            $scope.show = false;
            $scope.api = PopdownAPI;

            $scope.$watch('api.status', toggledisplay)
            $scope.$watch('api.message', toggledisplay)

            $scope.hide = function() {
                $scope.show = false;
                $scope.api.clear();
            };

            function toggledisplay() {
                $scope.show = !!($scope.api.status && $scope.api.message);               
            }
        },
        template: '<div class="alert alert-{{api.status}}" ng-show="show">'  
                  '  <button type="button" class="close" ng-click="hide()">×</button>'  
                  '  {{api.message}}'  
                  '</div>'
    }
})

O zaman ben Popdown bağlı app bir modül tanımlayın:

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

app.controller('main', function($scope, PopdownAPI) {
    $scope.success = function(msg) { PopdownAPI.success(msg); }
    $scope.error   = function(msg) { PopdownAPI.error(msg); }
});

Ve HTML gibi görünüyor:

<html ng-app="app">
    <body ng-controller="main">
        <popdown></popdown>
        <a class="btn" ng-click="success('I am a success!')">Succeed</a>
        <a class="btn" ng-click="error('Alas, I am a failure!')">Fail</a>
    </body>
</html>

Eğer tamamen ideal olup olmadığından emin değilim, ama mantıklı bir yol gibi küresel-ish popdown bir yönerge ile iletişim kurmak için geldi.

Yine, başvuru için, the fiddle.

Bunu Paylaş: