Question

我尝试将指令属性值传递给模板ID，并且可以在另一个指令

中使用

这是我的index.html

<my-value name="jhon"></my-value>

这是我的js代码

.directive('myValue',function(){
  return {
    restrict:"E",
    templateUrl:"myname.html",
    scope: {
      name:"="
    },
    link:function(scope,element,attr) {
    }
  }
});

这是我的myname.html

<div>
<p  slide heading="name"></p>
</div>

在上面的代码“slide”是另一个指令

这里是幻灯片指令代码

.directive('slide',function(){
  return{
    restrict:"A",
    link:function(scope,elem,attr){
      console.log(attr.heading);
      // Here i want the name first i assigned in index.html as like    "attr.heading = jhon"
    }
  }
})

我的问题是我将name="jhon"分配给my-value指令我希望将该名称动态发送到my-value指令模板，然后我必须将该名称指定给slide指令属性heading= name并且必须在slide指令链接中使用，因为我想动态地将名称从一个指令传递给该指令模板，并从那里我必须分配给另一个指令属性，并且该名称必须在slide指令链接函数中使用

提前致谢

Answer 1

        var app = angular.module("my-app",[]);

        app.directive('myValue',function(){
            return {
                restrict:"E",
                template:'<div><p  slide heading="{{name}}"</p></div>',
                scope: {
                    name:"="
                },
                link:function(scope,element,attr) {
                }
            }
        });

        app.directive('slide',function(){
            return{
                restrict:"A",
                link:function(scope,elem,attr){
                    console.log(attr.heading);
                    // Here i want the name first i assigned in index.html as like    "attr.heading = jhon"
                }
            }
        })

        app.controller('demoCtrl',['$scope',function($scope) {

          $scope.myname = "john"
        }]);

<!DOCTYPE html>
<html lang="en" ng-app="my-app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    
</head>
<body>
   <div ng-controller="demoCtrl">

       <my-value name="myname"></my-value>
   </div>

</body>
</html>

只需更改以下行。

myname.html

<div>
<p  slide heading="{{name}}"></p>
</div>

的index.html

 <my-value name="myname"></my-value>

这里指定一些控制器变量而不是静态名称“john”，以便双向数据绑定工作。例如

app.controller("...",function($scope){
$scope.myname = "john"
})

我们如何将值从指令传递给指令模板，并在另一个指令范围内使用它

1 个答案: