两种方式绑定属性 angularjs

Question

属性值不会在属性的双向绑定上更新。我需要看属性吗？我创建了一个简单的双向绑定。如果我在指令呈现后更改 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>

Answer 1

回答你的问题。是的，您需要监视属性和更新值的函数。

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

我会在 plunker, or here under "Creating a Directive that Manipulates the DOM"

中效仿这个例子

但是，您可能会使它变得比您需要的复杂一点。这是一个独立的范围，所以我们将添加我们想要访问的范围变量作为 html.

中的属性

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

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

然后，在作用域上，定义包含您将使用的作用域变量的属性。

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

然后使用模板代替“link:”。

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

这样你就只会绑定你关心的值。

两种方式绑定属性 angularjs

Two way binding on attributes angularjs

data-binding

attributes

angularjs-directive