AngularJS指令多视图

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

e、 g.一个详细视图：

• 形象
• 名字
• 姓
• 电子邮件
• 电话

其中一个只显示图片和名称：

• 形象
• 名

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

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

有好的做法吗？

您可以执行“客户视图”指令

并通过指定不同的“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>'
  };
});

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);
    }
};
});

angular.module（“myApp”，[]）
.controller（“customerCtrl”，功能（$scope）{
$scope.customers=[{firstName:“吉米”，lastName:“詹姆斯”，电子邮件：jimmyj@gmail.com，电话：“000-00000-00”}；
})
.指令（“customerView”，函数（）{
返回{
限制：“E”，
范围：{
showDetail:“@”，
客户数据：“=”
},
链接：函数（范围、元素、属性）{
},
模板：{{customerData.firstName}{{customerData.lastName}}电话：{{customerData.phone}邮件：{{customerData.email}
};
});

编辑：如果不想使用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(){
  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>'
  };
});

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);
    }
};
});

angular.module（“myApp”，[]）
.controller（“customerCtrl”，功能（$scope）{
$scope.customers=[{firstName:“吉米”，lastName:“詹姆斯”，电子邮件：jimmyj@gmail.com，电话：“000-00000-00”}；
})
.directive（“customerView”，函数（$compile）{
返回{
限制：“E”，
范围：{
showDetail:“@”，
客户数据：“=”
},
链接：函数（范围、元素、属性）{
var showDetail=attrs.showDetail | | false；
var temp1={{customerData.firstName}{{customerData.lastName}}电话：{{customerData.phone}}邮件：{{customerData.email}}；
var temp2='{{customerData.firstName}}{{customerData.lastName}}'；
var el=showDetail？$compile（temp1）（范围）：$compile（temp2）（范围）；
元素。追加（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呈现所有用户时，控制器将维护客户模型并将客户模型传递给指令

快照

---

希望这对您有所帮助。

好的，如果我们不想有多个指令，我们需要在指令上添加一个controll属性，在您的例子中，

show detail

但是加入

ng show

指令是我希望通过创建视图工厂来避免的事情，因为它将在更高级的视图中传播。我使用$compile根据您分配给指令的值加载不同的模板。