入力内部指示からng-modelを取得し、それを指示属性に入れます

Question

入力がnibTextboxディレクティブの内部にあり、入力にng-modelがあり、そのng-model値を常に "ディレクティブの値が」属性。（私はしたいの使用は交換しないでください）

angular.module('nib', []) 
    .directive('nibTextbox', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       id: '@', 
       title: '@', 
      }, 
      compile: function (element, attributes) { 

       var linkFunction = function (scope, element, attributes) { 

       } 
       return linkFunction; 
      }, 
      controller: ['$scope', '$http', function ($scope, $http) { 

      }], 
      template: '<div value="{{nibTextBoxValue}}"><img src="" alt=""/><label>{{title}}</label><input id="{{id}}_txt" type="text" ng-model="nibTextBoxValue"></input></div>' 
     }; 
    }); 


<nib-textbox id="ngArmin1" title="ngArmin1Title" value="{{nibTextBoxValue}}"></nib-textbox> 

Answer 1

valueは<div>要素に対して有効ではありません。それでdata-divに変更しましょう。

angular.module('nib', []) 
    .directive('nibTextbox', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       id: '@', 
       title: '@', 
      }, 
      compile: function (element, attributes) { 

       var linkFunction = function (scope, element, attributes) { 

       } 
       return linkFunction; 
      }, 
      // Injected $element for manipulating attributes     
      controller: ['$scope', '$http', '$element', function ($scope, $http, $element) { 


       $scope.$watch("nibTextBoxValue", function(newValue) { 
       $element.attr("data-value", newValue); 
      }); 
     }], 
      templateUrl: 'template.html' // Extracting the template to a file 
     }; 
    }); 

ディレクティブのテンプレート（template.html）：

<div> 
    <img src="" alt=""/><label>{{title}}</label> 
    <input id="{{id}}_txt" type="text" ng-model="nibTextBoxValue"></input> 
    </div> 

これは、多かれ少なかれ（私は通常typescriptですで動作しますが、私はアイデアを渡すために、プレーンはJavaScriptを使用します）どのように見えるかです

また、あなたのディレクティブからvalue属性を削除：

<nib-textbox id="ngArmin1" title="ngArmin1Title"></nib-textbox>

Answer 2

答え：使用の$腕時計0123をこれに変更コントローラの定義：

controller: ['$scope', '$http', '$element', function ($scope, $http, $element) { 
        $scope.$watch("nibTextBoxValue", function (nv) { 
         $element.attr("value", nv); 
        }); 
       }]