1

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

例如一个细节视图：

  • 图片
  • 名
  • 姓
  • 电子邮件
  • 电话

一个只显示图片和名称：

  • 图片
  • 名字，姓氏

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

我放入的模型将永远是客户，我调用的方法也将是相同的。

有好的做法吗？

4

1 回答 1

2

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

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

该指令将像这样创建

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

我写了一个简单的例子：

解决方案1 ​​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 渲染所有用户时，控制器将维护客户模型并将客户模型传递给指令。

快照

在此处输入图像描述

希望这对你有帮助。

于 2013-11-15T09:24:31.093 回答