Question

我有“nibTextbox”指令，里面有一个输入，输入有一个ng-model，我希望ng-model值始终在指令的“value”属性中可用。（我不想使用replace）

    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。这是它看起来或多或少的方式（我通常使用打字稿但我会使用普通的javascript来传递这个想法）：

 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>

此外，从指令中删除value属性：

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

Answer 2

答案：使用$ watch 将控制器定义更改为：

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

从输入内部指令获取ng-model并将其放在指令的属性中

2 个答案: