AngularJS从states指令导航，正确的方式

Question

我想做一个指令，它将获取Angular UI-Router的状态信息，并在此基础上创建一个导航栏。现在我们该怎么做才是正确的呢？

a)创建具有$state依赖的NavController，获取状态信息并在其中将其转换为合适的JS数组，然后通过属性将该数组传递给指令并在那里进行DOM操作。

b)创建一个具有$state依赖项的NavDirective，并在其中执行所有工作(状态信息转换和DOM操作)。

什么是一个好的实践建议？

现在我有了以下内容：

app.directive('navigation', ['$parse', '$compile', function ($parse, $compile) {
return {
    restrict: 'A',
    scope: true,
    link: function (scope, element, attrs) {
        scope.selectedNode = null;


        scope.$watch(attrs.menuData, function (val) {
            var template = angular.element(
                '<ul class="nav navbar-nav">'
                + '<li ng-repeat="node in ' + attrs.menuData + '" active-tab="{{node.href}}">'
                + '<a ui-sref="{{node.state}}"><b>{{node.text}}</b></a>'
                + '</li>'
                + '</ul>'
            );

            var linkFunction = $compile(template);

            linkFunction(scope);
            element.html(null).append( template );
        }, true);
    }
};

}])；

app.controller('NavigationController', ['$scope', '$state', function ($scope, $state) {

    var menu = [];
    var states = $state.get();

    _.each(states, function(state, key) {
        if(!_.isObject(state) || _.has(state, 'abstract') || _.has(state, 'parent')) {
            return;
        }

        var object = {
            text: _.has(state.data, 'title') ? state.data.title : '(no title)',
            state: state.name,
            href: state.url
        }

        menu.push(object);
    });

    $scope.menu = menu;
}]);

Answer 1

通常不应该使用控制器来执行DOM操作。

来自angular开发人员指南：

https://docs.angularjs.org/guide/controller

请勿使用控制器执行以下操作：

操纵DOM -控制器应该只包含业务逻辑。将任何表示逻辑放入控制器都会显著影响其可测试性。Angular具有适用于大多数情况的数据绑定和封装手动DOM操作的指令。

Answer 2

这是指令的v2。这是在angular中做指令的正确方式吗？

app.directive('navigation', ['$parse', '$compile', function ($parse, $compile) {
    return {
        restrict: 'A',
        templateUrl: 'views/widgets/navbar.html',
        replace: true,
        scope: {},
        controller: ['$scope', '$state', function ($scope, $state) {
            var menu = [];
                var states = $state.get();

            _.each(states, function(state, key) {
                if(!_.isObject(state) || _.has(state, 'abstract') || _.has(state, 'parent')) {
                    return;
                }

                var object = {
                    text: _.has(state, 'data') && _.has(state.data, 'title') 
                            ? state.data.title : '(no title)',
                    state: state.name,
                    href: state.url
               }

               menu.push(object);
            });

            $scope.nav = {};
            $scope.nav.menu = menu;
        }],
        link: function (scope, element, attrs) {
            scope.nav.brand = attrs.navBrand; 
            console.log(scope);
        }
    };
 }]);

模板：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">{{ nav.brand }}</a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li ng-repeat="node in nav.menu" active-tab="{{node.href}}">
            <a ui-sref="{{node.state}}"><b>{{node.text}}</b></a>
        </li>
    </ul>
</div>

​

和指令调用：

<div navigation nav-brand="My Brand"></div>