Как реализовать наследование в AngularJS?

Question

Я пытаюсь разрешить типу пользователя наследовать свойства другого типа пользователя. Сотрудник является родительским объектом, Math Professor является дочерним объектом, где Math Professor наследует свойства сотрудника. Как бы это реализовать? Спасибо за любую помощь.

Код сниппета:

app.service('WorkService', function($http) { 
    var user; 

this.isStaffMember = function() { 
    return user.type ==== 'StaffMember' 
} 
this.isMathProfessor = function() { 
    return user.type === 'MathProfessor' 
} 
}); 

UPDATE:

[. Примечание: я переименовал объект isTeacher в isStaffMember]

Я думал, что я, вероятно, не нужно что-либо наследуть любые свойства, если я просто изменил код в своем HTML. В HTML я пытаюсь реализовать его, чтобы StaffMember мог видеть только 2 варианта добавления и редактирования курса. Но профессор математики может видеть все меню. Он не работает, хотя меню не отображается вообще, когда я добавляю & & WorkService.isMathProfessor().

<li ng-show="WorkService.isStaffMember()" && ng-show="WorkService.isMathProfessor()" class="dropdown"> 
        <a class="dropdown-toggle">Courses 
        <ul> 
         <li><a>New Course</a></li> 
         <li><a>Add Course</a></li> 

         <div ng-show="WorkService.isMathProfessor()"> 
          <li class=""></li> 
          <li><a>Algebra I</a></li> 
          <li><a>Algebra II</a></li> 
         </div> 
        </ul> 
       </li> 

Answer 1

Изменения, безусловно, нужно сделать в HTML, а не JavaScript функции. Директива AngularJS (ng-show), необходимая для включения isMathProfessor, которую я начинал работать, но ошибка, которую я делал, заключалась в использовании оператора & & вместо || оператор.

<li ng-show="WorkService.isStaffMember() || WorkService.isMathProfessor()> 

С этим изменением первые 2 варианта видны, если это либо сотрудник, либо профессор математики. Но последние 3 варианта доступны только для преподавателя математики.

Answer 2

Это намного проще сделать в ES6 или TypeScript. В ES5 это будет выглядеть так, если вы используете модули Browserify и commonJS, вы можете легко их разделить на отдельные файлы. Для этого примера допустим его только в одном файле.

function Work() { 
    this.job = 'drone'; 
} 
Work.prototype.getJob = function() { 
    return this.job; 
} 

app.service('Work', Work); 

Teacher.prototype = new Work(); 
function Teacher() { 
    this.job = 'teacher'; 
} 

app.service('Teacher', Teacher); 

MathTeacher.prototype = new Teacher(); 
function MathTeacher() { 
    this.job = 'mathTeacher'; 
} 

app.service('MathTeacher', MathTeacher); 

Если вы использовали ES6 или машинопись MathTeacher просто выглядеть следующим образом:

class MathTeacher extends Teacher { 
    job = 'mathTeacher'; 
}