Правильное ли использование угловой директивы?

Question

Я очень новичок в угловом и стараюсь сделать директиву, которая позволяет администраторам добавлять изменения на веб-странице, а если пользователь не является администратором, просто отображает содержимое в неизменяемом формате. Я решил назвать эту директиву "Blurb", и я определил его следующим образом:

аннотацию, modules.js:

;(function() { 
    'use strict'; 
    angular.module('blurb', ['ngSanitize', 'mdotTamcCouncil.core']); 

})(); 

аннотацию, directive.js

; (function() { 
    'use strict'; 
    angular.module('blurb') 
     .directive('mcgiBlurb', blurb); 

    function blurb() { 
     return { 
      restrict: 'E', 
      replace: true, 
      templateUrl: jsGlobals.componentsFolder + '/blurb/blurb.html', 
      controller: function ($scope, blurbsFactory, userFactory) { 
       $scope.content = ""; 
       $scope.blurbs = {}; 
       $scope.currentUser = {}; 
       this.editMode = false; 


       userFactory().success(function (data) { 
        $scope.currentUser = data; 
       }); 

       blurbsFactory().success(function (data) { 
        $scope.blurbs = data; 
        $scope.content = $scope.blurbs[$scope.textKey]; 
       }); 

       this.enterEditMode = function() { 
        this.editMode = true; 
       }; 

       this.saveEdits = function() { 
        this.editMode = false; 
        $scope.blurbs[$scope.textKey] = $scope.content; 
       }; 
      }, 
      controllerAs: 'blurb', 
      scope: { 
       textKey: "@" 
      } 
     }; 
    }; 
})(); 

blurb.html

<div> 
    <form name="blurbForm" novalidate> 
     <div class="form-group" 
      ng-show="currentUser.isAdmin && blurb.editMode" 
      ng-class="{ 'has-error' : blurbForm.content.$invalid && !blurbForm.content.$pristine, 'has-success' : !blurbForm.content.$invalid && !blurbForm.content.$pristine }"> 
      <textarea name="content" class="form-control" rows="6" ng-model="content" required="true"></textarea> 
      <p ng-show="blurbForm.content.$invalid && !blurbForm.content.$pristine">Content is required.</p> 
      <div> 
       <button type="button" class="btn btn-primary btn-sm" ng-disabled="blurbForm.$invalid" ng-click="blurb.saveEdits()"><i class="glyphicon glyphicon-ok-sign icon-white"></i> Save Changes</button> 
      </div> 
     </div> 
     <div class="form-group" ng-hide="blurb.editMode"> 
      <p ng-bind-html="content"></p> 
      <div ng-show="currentUser.isAdmin"> 
      <button type="button" class="btn btn-primary btn-sm" ng-click="blurb.enterEditMode()"><i class="glyphicon glyphicon-pencil icon-white"></i> Edit</button></div> 
     </div> 
    </form> 
</div> 

Я тогда его экземпляр на моем index.html следующим образом:

<mcgi-blurb text-key="mainPageTest"></mcgi-blurb> 

Я создал следующие службы, которые будут использоваться директивой, с надеждой, что в конечном итоге я смогу извлечь их из данных, полученных из WebAPI.

аннотацию, service.js

(function() { 
    angular.module('mdotTamcCouncil.core').factory('blurbsFactory', function ($http) { 
     var promise = null; 

     return function() { 
      if (promise) { 
       // If we've already asked for this data once, 
       // return the promise that already exists. 
       return promise; 
      } else { 
       promise = $http.get(jsGlobals.blurbsDataURL); 
       return promise; 
      } 
     }; 
    }); 
})(); 

пользователя service.js

(function() { 
    angular.module('mdotTamcCouncil.core').factory('userFactory', function ($http) { 
     var promise = null; 

     return function() { 
      if (promise) { 
       // If we've already asked for this data once, 
       // return the promise that already exists. 
       return promise; 
      } else { 
       promise = $http.get(jsGlobals.userDataURL); 
       return promise; 
      } 
     }; 
    }); 
})(); 

И все это работает. Который кажется большим. Но у меня есть это подлое подозрение, что я не использую директивы в том смысле, в каком они предназначены. У меня есть куча «логики», которая управляет отображением html в html-шаблоне, и это кажется немного «грязным»/«взломанным»/«Я не знаю».

Это правильный способ реализации угловой директивы? Должен ли я иметь части этого в другом месте? Если да, то где?

Answer 1

Для того, чтобы поля Нередактируемыми вы можете просто использовать нг-чтения директивы, как здесь: <INPUT ng-readonly="expression">...</INPUT> и использовать нг-если вместо нг-шоу сделать контент видимой пользователя роль базы, а ng- если dosm't не позволяет DOM рендерить, если выражение возвращает false.

нг-чтения ng-readonly documentation

нг-если ng-if directive documentation