角度指令不起作用

角度指令不適用於以下情況。在我的以下角度應用程序中，我有兩種我希望顯示的項目存儲在控制器中。要顯示它們，我已經爲這兩種情況創建了指令，並用ng-repeat迭代列表，但這些項目未呈現。角度指令不起作用

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <style media="screen"> 
    .selected { 
     background: #cdcdcd; 
    } 
    </style> 
</head> 

<body ng-app="myApp"> 

<div ng-controller="ListController as listctrl"> 

    <div class="" ng-repeat="item in listctrl.items"> 
    <itemtype1 ng-if="item.type_ === 'type1'" val="item.val"></itemtype1> 
    <itemtype2 ng-if="item.type_ === 'type2'" val="item.val"></itemtype2> 
    </div> 


</div> 

<script type="text/javascript"> 
angular 
    .module('myApp',[]) 
    .controller('ListController', function($scope) { 
    var listctrl = this; 
    listctrl.items = []; 

    listctrl.items.push({'val':'A', 'type_': 'type1'}); 
    listctrl.items.push({'val':'B', 'type_': 'type2'}); 
    listctrl.items.push({'val':'C', 'type_': 'type1'}); 
    listctrl.items.push({'val':'D', 'type_': 'type2'}); 
    }) 
    .directive('itemtype1', function() { 

    return { 

     template: '<strong>{{$scope.val}}</strong>', 
     restrict: 'E', 
     scope: { 
     val: '=' 
     }, 
     link: function postLink(scope, element, attrs) { 

     } 
    }; 
    }) 
    .directive('itemtype2', function() { 

    return { 

     template: '<i>{{$scope.val}}</i>', 
     restrict: 'E', 
     scope: { 
     val: '=' 
     }, 
     link: function postLink(scope, element, attrs) { 

     } 
    }; 
    }); 
</script> 

</body> 
</html>

來源

2017-10-04 Jay

添加plunkr鏈接 –

我第一次的猜測，只是通過它一眼，是你應該改變以下內容：

template: '<strong>{{$scope.val}}</strong>'

這樣：

template: '<strong>{{val}}</strong>'

來源

2017-10-04 13:15:37

角度指令不起作用

回答

相關問題