AngularJS將對象傳入隔離範圍

Question

我正在嘗試創建一個可重用的html元素/ angular指令，這個指令將在ng-repeat內部使用，所以我想將它傳遞給它在DOM中顯示的值。

值得注意的是，我不在乎綁定的值。它們可以是一次性綁定，只需在第一次ng-repeat創建它們時顯示它們的值。

例如這裏是我的指令：

app.directive('newsListing', function() { 
    return { 
     restrict: 'AE', 
     replace: 'true', 
     templateUrl: '../Pages/Views/Templates/newsListing.html', 
     scope: {}, 
     link: function (scope, elem, attrs) { 
      //Fairly sure this is where the binding needs to happen? 
     } 
    }; 
}); 

我的HTML模板：

<div> 
<span class="glyphicon glyphicon-list-alt logo-green"></span> 
<label>{{DateValue}}</label> 
<label>{{Category}}</label> 
<label class="noBorder">{{Content}}</label> 

我想要的結局產品是：

<news-Listing Date="{{someValue}}" Category="{{someValue}}" Content="{{someValue}}"></news-Listing> 

我從來沒有創建迪在之前和我試圖遵循的所有指南都沒有解釋範圍，並且綁定發生在指令內部。

Answer 1

嘗試這樣

var app = angular.module('anApp', []); 
 
app.controller('aCtrl', function($scope) { 
 

 

 
$scope.data = [{date:"2000-12-12",category:"sport",content:"this is a test"}] 
 
}); 
 
app.directive('newsListing', function() { 
 
    return { 
 
     restrict: 'AE', 
 
     replace: 'true', 
 
     template: '<div><label>{{date}}</label><p>{{category}}</p><p>{{content}}</p></div>', 
 
     scope: { 
 
      date:'@', 
 
      category:'@', 
 
      content:'@' 
 
     }, 
 
     link: function (scope, elem, attrs) { 
 
      
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="anApp" ng-controller="aCtrl"> 
 
    <div ng-repeat="d in data"> 
 
    <news-listing date="{{d.date}}" category="{{d.category}}" content="{{d.content}}" ></news-listing> 
 
    </div> 
 
</div>

Answer 2

這裏是你想要什麼工作的例子：https://jsfiddle.net/jonva/kuk3pbbz/

.directive('newsListing', function() { 
return { 
    restrict: 'AE', 
    replace: 'true', 
    template: '<div> < span class = "glyphicon glyphicon-list-alt logo-green" > < /span> <label> {{dateValue}} < /label> <label> {{category}} < /label> < label class = "noBorder" > {{content}} < /label>', 
    scope: { 
      dateValue: '@', 
      content: '@', 
      category: '@', 

    }, 
    link: function(scope, elem, attrs) { 
    //Fairly sure this is where the binding needs to happen? 
    } 
}; 
});