Понимание парадигмы «директивы» в Angularjs

Question

Я думал о директивах в Angularjs, таких как пользовательские элементы управления в ASP.Net, и, возможно, я ошибаюсь.

Пользовательский элемент управления позволяет инкапсулировать кучу функциональности в виджет, который можно отбросить на любую страницу в любом месте. Родительская страница не должна предоставлять ничего виджету. У меня возникают проблемы с получением директив, чтобы сделать что-нибудь близко к этому. Предположим, что у меня есть приложение, где, как только пользователь вошел в систему, я где-то вишу на первое/последнее имя пользователя в глобальной переменной. Теперь я хочу создать директиву под названием «loggedinuser» и поместить ее на любую страницу, которую я хочу. Он отобразит простой div с именем зарегистрированного пользователя, извлеченного из этой глобальной переменной. Как мне это сделать без необходимости передавать контроллер этой информации в директиву? Я хочу, чтобы использование директивы на мой взгляд выглядело так же просто, как < loggedinuser/>

Возможно ли это?

Answer 1

Я думаю, вы можете примерно подвести итог тому, что такое директива, «что-то, что инкапсулирует кучу функциональности в виджет, который можно отбросить на любую страницу в любом месте», но есть нечто большее, чем это. Директива - это способ распространения HTML, создавая новые теги, позволяя писать более выразительные разметки. Например, вместо того, чтобы писать теги <div> и кучу <li>, чтобы создать рейтинговый контроль, вы можете обернуть его новым тегом <rating>. Или, вместо того, чтобы много <div> с, и <span> с и этажерки создать интерфейс с вкладками, вы могли бы реализовать пару директив, скажем, <tab> и <tab-page>, и использовать их как это:

<tab> 
    <tab-page title="Tab 1"> tab content goes here </tab-page> 
    <tab-page title="Tab 2"> tab content goes here </tab-page> 
</tab> 

Это действительно мощь директив, чтобы улучшить HTML. И это не означает, что вы должны создавать только «общие» директивы; вы можете и должны создавать компоненты, специфичные для вашего приложения. Итак, вернемся к вашему вопросу, вы можете реализовать тег <loggedinuser>, чтобы отобразить имя зарегистрированного пользователя, не требуя от контроллера предоставления ему информации. Но вы определенно не должны полагаться на глобальную переменную для этого. Угловой способ сделать это было бы использовать сервис для хранения этой информации, и ввести его в директиву:

app.controller('MainCtrl', function($scope, userInfo) { 
    $scope.logIn = function() { 
    userInfo.logIn('Walter White'); 
    }; 

    $scope.logOut = function() { 
    userInfo.logOut(); 
    }; 
}); 

app.service('userInfo', function() { 
    this.username = '' 
    this.logIn = function(username) { 
    this.username = username; 
    }; 
    this.logOut = function() { 
    this.username = ''; 
    }; 
}); 

app.directive('loggedinUser', function(userInfo) { 
    return { 
    restrict: 'E', 
    scope: true, 
    template: '<h1>{{ userInfo.username }}</h1>', 
    controller: function($scope) { 
     $scope.userInfo = userInfo; 
    } 
    }; 
}); 

Plunker here.

Angular dev guide on directives является обязательным местом, если вы хотите начать создавать мощные, многоразовые директивы.