Question

我正在尝试使用angular指令中的模型更新我的视图这里是我创建的指令

app.directive('aboutOptions', [function() {
        return {
            restrict: 'C',
            scope: {
                testing: '='
            },
            transclude: true,
            link: function(scope, elem, attr) {
            scope.$watch(attr.ngModel, function() {
                console.log(scope.$eval(attr.ngModel));
                scope.testing = scope.$eval(attr.ngModel);
            });
        }
    }
}]);

这里是html模型，文件名是ab.html

<input type="text" class="about-options" ng-model="testing" />

以下是要更新的视图，文件名为show.html

<h2 class="about-options">{{testing}}</h2>

ab.html文件将作为模板加载到 jquery ui对话框中，而我的show.html文件位于主页

如果我删除

scope: {
       testing: '='
},

控制台显示我正在输入的内容

更新 - 1

尝试以下更改

testing: '=test'

并在html中

<input type="text" class="about-options" ng-model="testing" />

<h2 class="about-options">{{test}}</h2>

Answer 1

你最后做的是使用作用域来隔离作用域，因此如果在使用该指令的元素上找不到名为testing的属性，则应该在控制台中看到错误。如果你想要一个隔离范围（很多时候都是个好主意），那么你需要提供测试=＆＃34; someScopeVar＆＃34;作为指令应用于的元素的属性。

Answer 2

看看这个回购，看看我是怎么做的。

https://github.com/jedininjaster/angular-mask-money/blob/master/demo/js/angular.maskMoney.js

还要看一下angular-ui mask指令。这就是我建立指令的方式。

https://github.com/angular-ui/ui-utils/blob/master/modules/mask/mask.js

我道歉，我现在没时间写完整的解释。将在明天尝试更新

angularjs模型视图通过角度指令更新

2 个答案: