示例代码

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li my-directive ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>
  </ul>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {

$scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
    }
    ]
})

我的指令代码没有被写入。我想知道有多少种方法可以将范围或控制器数据传递给指令，以便我可以从指令中进行操作。说我想把item.price传递给指令。我们可以通过多少种方式。与示例代码讨论。感谢

Answer 1

您可以像下面一样定义指令的范围，其中'='表示绑定是双向的。您可能还想要包含transclude: true，因为您的指令似乎包含其他元素，尽管您可能能够摆脱它（见下文）。

angular.module('myApp')
.directive('myDirective', function () {
    return {
        transclude: true,
        restrict: 'AEC',
        scope: {
            name: '=',
            price: '='
        },
        templateUrl: 'my-directive.html',
        link: function (scope, element, attr) {
            }
        }
    }
});

然后，你会这样称呼你：

<li my-directive ng-repeat="item in products" price="item.price" name = "item.name"></li>

由于您传递了name和price，因此您无需li内的值。

Answer 2

有很多方法： HTML

<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>

的Javascript

myApp.directive('myDirective', function(){
  return {
    scope: { price: '=' },
    require: 'ngModel',
    link : function(scope){
      console.log(scope.price)
    },
    controller: function(scope, element, attrs, ngModel){
      console.log(ngModel.price);
      console.log(scope.price);
    }
  }
});

Angular：如何将范围数据传递给指令

示例代码

2 个答案: