結合數據

Question

你好，我是，我怎麼可以綁定不同的數據相同的指令，從同一個對象

(function() { 
 
    'use strict'; 
 
    angular.module('app', []) 
 
     .controller('appController', appController) 
 
     .directive('userForm', userForm); 
 
    /**@Injectable*/ 
 
    function appController($http) { 
 
     let vm = this; 
 
     vm.user = { 
 
      userName: 'Test User', 
 
      email: 'test@gmail.com', 
 
      number: '1456', 
 
      address: 'zyz', 
 
      state: 'abcd', 
 
      city: 'xyz' 
 
     }; 
 
    } 
 
    function userForm() { 
 
     return { 
 
      restrict: 'E', 
 
      scope: { 
 
       data:'=' 
 
      }, 
 
      templateUrl: 'public/app/form.directive.html', 
 
      controller: 'appController', 
 
      link: function (scope, attr, element) { 
 

 
      } 
 
     } 
 
    } 
 
})();

<legend>{{headerLabel}}</legend> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" ng-model="data.userName" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label2}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="email"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label3}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="number"> 
 
    </div> 
 
</div> 
 

 
<!--Main Index --> 
 
<user-form data="vm.user"></user-form> 
 
<user-form data="vm.user"></user-form>

在這裏，我已經使用相同有點困惑指令兩次，我想綁定第一個指令與個人信息，如用戶名，電子郵件和第二指令應綁定地址info.Is有可能做到這一點？

Answer 1

回答你的問題是的，這是可能的。下面是一個這樣的可能解決方案的演示。你可以做的是將一個更多的屬性傳遞給指令，以決定是否需要顯示地址。然後使用ng-if來顯示相應的控件。並相應地更改您的模板。下面是一個演示。

(function() { 
 
    'use strict'; 
 
    angular.module('app', []) 
 
    .controller('appController', appController) 
 
    .directive('userForm', userForm); 
 
    /**@Injectable*/ 
 
    function appController($http) { 
 
    let vm = this; 
 
    vm.user = { 
 
     userName: 'Test User', 
 
     email: 'test@gmail.com', 
 
     number: '1456', 
 
     address: 'zyz', 
 
     state: 'abcd', 
 
     city: 'xyz' 
 
    }; 
 
    } 
 

 
    function userForm() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     data: '=', 
 
     address: '@' 
 
     }, 
 
     template: `<div ng-if="address=='false'"><legend>{{headerLabel}}</legend> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" ng-model="data.userName" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label2}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="data.email"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label3}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="data.number"> 
 
    </div> 
 
</div></div> 
 
<div ng-if="address=='true'"> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" ng-model="data.address" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label2}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="data.state"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3 control-label" for="textinput">{{label3}}</label> 
 
    <div class="col-sm-9"> 
 
     <input type="text" class="form-control" ng-model="data.city"> 
 
    </div> 
 
</div> 
 
</div> 
 
`, 
 
     link: function(scope, attr, element) { 
 

 
     } 
 
    } 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="appController as vm"> 
 
    <!--Main Index --> 
 
    <user-form data="vm.user" address="false"></user-form> 
 
    <h3> 
 
    Address Form 
 
    </h3> 
 
    <user-form data="vm.user" address="true"></user-form> 
 
</div>

希望它能幫助:)

Answer 2

我不知道爲什麼你會想這樣做，使用指令爲兩個不同的目的。我建議爲它創建2個不同的指令。如果你仍然需要它，你可以在指令函數中有一個邏輯內部鏈接來執行不同的邏輯。它不是很優雅，但你要的不是非此即彼（恕我直言）

​​

<legend>{{headerLabel}}</legend> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="textinput">{{label1.label1}}</label> 
    <div class="col-sm-9"> 
     <input type="text" ng-model="data.userName" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="textinput">{{label2}}</label> 
    <div class="col-sm-9"> 
     <input type="text" class="form-control" ng-model="email"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="textinput">{{label3}}</label> 
    <div class="col-sm-9"> 
     <input type="text" class="form-control" ng-model="number"> 
    </div> 
</div> 

<user-form data="vm.user" type="name_info"></user-form> 
<user-form data="vm.user" type="address_info"></user-form>