角度指令不起作用

角度指令不适用于以下情况。在我的以下角度应用程序中，我有两种我希望显示的项目存储在控制器中。要显示它们，我已经为这两种情况创建了指令，并用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

角度指令不起作用

回答

相关问题