在$routeChangeSuccess指令的模板中访问$scope

Accessing $scope inside template of directive on $routeChangeSuccess

本文关键字：访问 scope routeChangeSuccess 指令      更新时间：2023-09-26

目前我正在尝试用角度:)编写用于学习目的的面包屑我正在等待 $routeChangeSuccess 事件并用名称 crumb 填充一个数组。在痕迹导航的模板中使用 ng-repeat（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}}"。

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

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

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>'
    }
}])
相关文章：