javascript - 无法获取独立范围的值

标签 javascript angularjs angularjs-directive custom-directive

无法获取独立作用域“check”的值。出于测试目的,我将索引值传递给“check”。我必须在 ng-repeat 完成时添加动画,但是“scope.$last”也给出了未定义的值。我不会发现我的代码语法或逻辑有什么问题。

angular.module('myApp',[])
.directive('track',function(){
    return{
        restrict:'E',
        scope: { check : "="},
        template:`<div class="routeTable"><table class="table" id="road">
                     <tr ng-repeat="level in levels">
                         <td  ng-repeat="lane in lanes"  check = {{$index}}></td>
                      </tr>
                   </table></div>`,
        controller: function($scope){
            $scope.levels = [1,2];
            $scope.lanes= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        },
        link: function(scope,elem,attr){
            console.log(scope.$last);
            console.log(attr.check);
        }
    }
})
.routeTable table tr td{
    border: 1px solid  #000000 !important;
    height:30px;
    background-color:#CACDD0;
    width:30px;
}
.routeTable{
    padding:10px;
    width:500px;
}
<!doctype html>
<html ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <track></track>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="track.js"></script>
</body>

</html>

最佳答案

我想你误会了什么。 scope 变量传递仅适用于指令的同一标记。在下面的示例中,我定义了一个新指令 d1check 属性将正确传递给它。

angular.module('myApp',[])
.directive('track',function(){
    return{
        restrict:'E',
        
        template:`<div class="routeTable"><table class="table" id="road">
                     <tr ng-repeat="level in levels">
                         <td  ng-repeat="lane in lanes" d1 check = "$index"></td>
                      </tr>
                   </table></div>`,
        controller: function($scope){
            $scope.levels = [1,2];
            $scope.lanes= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        }
    }
})

.directive('d1', function(){
    return {
        scope: { check : "="},
        link: function(scope,elem,attr){
            console.log(scope.check);
        }
    }
})
.routeTable table tr td{
    border: 1px solid  #000000 !important;
    height:30px;
    background-color:#CACDD0;
    width:30px;
}
.routeTable{
    padding:10px;
    width:500px;
}
<!doctype html>
<html ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <track></track>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="track.js"></script>
</body>

</html>

关于javascript - 无法获取独立范围的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46686241/

相关文章:

javascript - 需要一个并行指令 Controller ,无需创建父 Controller

Javascript 函数未正确显示警报

javascript - 将数组的长度设置为 0 似乎不会清空数组

javascript - 谷歌驱动器中包含的 KML 文件无法识别

angularjs - 如何在自动完成字段 Angular 上启用退格

javascript - 是否可以将服务注入(inject) Angular 1.5 组件的 templateUrl 属性?

javascript - 滚动时锁定窗口顶部的对象

javascript - 如何在 angularjs 中从外部追加 ng-repeat 范围内的数据?

javascript - BaseResponseOptions angular2 处理全局错误

angularjs - 通知 Controller 指令中所做的更改