在 $routeChangeSuccess 上的指令模板内访问 $scope

Question

目前我正在尝试编写一个用于学习目的的面包屑 :) 我正在等待 $routeChangeSuccess 事件并使用名称 crumb 填充一个数组。在面包屑的模板中使用 ng-repeat 读取此数组。我还想访问范围的变量。例子：

app.directive('breadCrumb', ['$location', '$route', '$routeParams', function(location, route, routeParams) {
    return {
        link: function($scope, element, attrs) {
             $scope.$on('$routeChangeSuccess', function(next, current) { 
                  var loc = location.path();
                  if(loc.indexOf('/users') >-1 && loc!='/users') 
                      $scope.crumb= [{href:"/users",val:"Meine Kommilitonen"}, 
                        {href:"/users/"+current.params.id,val: current.params.id}];
             });
         },
         template: '<div ng-bind="test"></div><div style="float:left" ng-repeat="item in crumb"><a href="{{item.href}}">{{item.val}}</a></div><div style="clear:both"></div>'
    }
}])

这很好用。但现在我想推送一个像 {href: current.params.id, val: $scope.user.userName} 这样的对象，这个值在控制器中，它为路由加载模板。如果我像 {{$route.current.scope.users.userName}} 直接在模板中这样写它就可以了。

现在我如何将这个值推送到数组中，以便它绑定到 div 并被解释为控制器的值。希望你能理解我的问题。

编辑：我已经搜索了很长时间。我的需要是（我知道没有其他东西适合我的目的）我需要像这样编译 s.th：'{{route.current.scope.user.userName}}' 在链接函数的指令中。

Answer 1

如果我理解正确，您的控制器中有一个值，并且您希望它在指令中可用？

这可以通过属性（attrs）或双向数据绑定（范围）来访问。我将展示双向绑定示例。

JS（指令）：

app.directive('breadCrumb', ['$location', '$route', '$routeParams', function(location, route, routeParams) {
    return {
        // add scope
        scope: {
            myValue: "=" // = means two way binding (you could probably use @ for one way binding)
        },
        link: function(scope, element, attrs) {
             console.log(scope.myValue); // the value on the directive
             // yourArray.push(scope.myValue);

             scope.$on('$routeChangeSuccess', function(next, current) { 
                  var loc = location.path();
                  if(loc.indexOf('/users') >-1 && loc!='/users') 
                      scope.crumb= [{href:"/users",val:"Meine Kommilitonen"}, 
                        {href:"/users/"+current.params.id,val: current.params.id}];
             });
         },
         template: '<div ng-bind="test"></div><div style="float:left" ng-repeat="item in crumb"><a href="{{item.href}}">{{item.val}}</a></div><div style="clear:both"></div>'
    }
}])

JS（控制器）：

$scope.someValue = {
    href: "/users",
    val: 1 
};

HTML：

<div bread-crumb my-value="someValue" ></div>

另一种方法是使用 attrs，不需要范围，HTML 是一样的

<div bread-crumb my-value="someValue" ></div>

JS：

app.directive('breadCrumb', ['$location', '$route', '$routeParams', function(location, route, routeParams) {
    return {
        link: function(scope, element, attrs) {
             console.log(attrs.myValue); // the value on the directive
             // yourArray.push(attrs.myValue);

             scope.$on('$routeChangeSuccess', function(next, current) { 
                  var loc = location.path();
                  if(loc.indexOf('/users') >-1 && loc!='/users') 
                      scope.crumb= [{href:"/users",val:"Meine Kommilitonen"}, 
                        {href:"/users/"+current.params.id,val: current.params.id}];
             });
         },
         template: '<div ng-bind="test"></div><div style="float:left" ng-repeat="item in crumb"><a href="{{item.href}}">{{item.val}}</a></div><div style="clear:both"></div>'
    }
}])