对属性angularjs的双向绑定

时间:2015-03-02 19:54:14

标签: data-binding angularjs-directive attributes

属性值不会在属性的双向绑定上更新。我需要关注属性吗? 我创建了一个简单的双向绑定。如果我在渲染指令后更改minValue,它不会更新新的minValue。

angular.app('revMgmtApp', []);
angular.module('revMgmtApp').controller('testCtrl', testCtrl);

function testCtrl() {
    var vm = this;
    vm.counter = 1;
    vm.minValue = 10;
};



angular.module('revMgmtApp').directive('testDir', function ($compile) {

    var calController = function () {
        var vm = this;
        vm.localOpen = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.opened = true;
        }
    }

    return {
        restrict: 'EA',
        scope: {
            ngModel: '=',
            minValue: '=',
        },
        replace: true,
        link: function (scope, elem, attrs, modelCtrl) {
            debugger;
            var el = '<div><span>';
            el += '<input type="number" ng-model="vm.ngModel"  ';

            if (scope.vm.minValue != null) {
                el += " min='" + scope.vm.minValue + "' ";
            }
            el += "/>";
            var el1 = $compile(el)(scope);
            elem.replaceWith(el1);

        },
        controller: calController,
        bindToController: true,
        controllerAs: 'vm',
    }

})

    <div ng-app="revMgmtApp" ng-controller="testCtrl as ctrl">
    <p>
        Enter min counter <input type="number" ng-model="ctrl.minValue" />
    </p>

    <test-dir ng-model="ctrl.counter" min-value="ctrl.minValue"></test-dir>
</div>

1 个答案:

答案 0 :(得分:-1)

回答你的问题。是的,您需要关注属性和更新值的函数。

scope.$watch(attrs.testDir, function(value) {
    //set value here
    //call update value here
  });

我会在plunker"Creating a Directive that Manipulates the DOM"

下的此示例中使用此示例

但是,你可能会让它变得更加复杂。它是一个独立的范围,因此我们将在html中添加我们想要访问的范围变量作为属性。

为清楚起见,我将指令html中的属性重命名为:

<test-dir mymodel="ctrl.counter" mymin="ctrl.minValue"></test-dir>

然后,在范围上,定义包含您将使用的范围变量的属性。

scope: {
        mymodel: '=mymodel',
        myminval: '=mymin',
    },

然后代替&#34; 链接:&#34;使用模板。

template: '<div><span><input ng-model="mymodel" min="myminval"/></span></div>';

这样,您只需绑定到您关注的值。