Question

假设我有一个客户模型，我想创建这个模型的不同视图

e.g。一个细节视图：

图像
名字
姓氏
电子邮件
电话

，只显示图片和名称：

图像
名字，姓氏

我是创建多个指令还是在这种情况下在指令中创建一个视图工厂？

我投入的模型将始终是客户，我调用的方法也将是相同的。

有没有好的做法？

Answer 1

您可以实施“客户视图”指令。

通过分配不同的“showDetail”属性来控制其状态。（我假设您的客户视图只有两种状态）

此指令将像这样创建

<customer-view customer-data="customer"></customer-view> <!-- Simple version -->
<customer-view customer-data="customer" show-detail="true"></customer-view> <!-- more detail -->

我写了一个简单的例子：

Solution1 APP.js

angular.module("myApp",[])
.controller("customerCtrl",function($scope){
  $scope.customers = [{firstName:"Jimmy",lastName:"James",email:"jimmyj@gmail.com",phone:"000-00000-00"}];
})
.directive("customerView",function(){
  return {
    restrict:"E",
    scope:{
        showDetail:"@",
        customerData:"="
    },
    link: function(scope,element,attrs){

    },
    template: '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span><div ng-show="showDetail"><span>Tel:{{customerData.phone}}</span></div><div ng-show="showDetail"><span>mail:{{customerData.email}}</span></div>'
  };
});

编辑：如果你不想使用ng-show，你可以尝试识别'showDetial'属性的值，并为链接函数中的指令元素分配不同的模板：

解决方案2 app.js

angular.module("myApp",[])
.controller("customerCtrl",function($scope){
  $scope.customers = [{firstName:"Jimmy",lastName:"James",email:"jimmyj@gmail.com",phone:"000-00000-00"}];
})
.directive("customerView",function($compile){
return {
    restrict:"E",
    scope:{
        showDetail:"@",
        customerData:"="
    },
    link: function(scope,element,attrs){
        var showDetail = attrs.showDetail || false;
        var temp1 = '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span></div><div><span>Tel:{{customerData.phone}}</span></div><div><span>mail:{{customerData.email}}</span></div></div>';
        var temp2 = '<div><img src=""/><div><span>{{customerData.firstName}} {{customerData.lastName}}</span></div></div>';
        var el = showDetail?$compile(temp1)(scope):$compile(temp2)(scope);
        element.append(el);
    }
};
});

<强> main.html中

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-controller="customerCtrl">
<h1>Simple</h1>
<div ng-repeat="customer in customers">
  <customer-view customer-data="customer"></customer-view>
</div>

<h1>More detail</h1>
<div ng-repeat="customer in customers">
    <customer-view customer-data="customer" show-detail="true"></customer-view>
</div>
</body>
</html>

当您使用ng-repaet呈现所有用户时，控制器将维护客户模型并将客户模型传递给指令。

快照

enter image description here

希望这对你有所帮助。

AngularJS指令多个视图

1 个答案: