javascript - 自定义指令模板中的 AngularJS 控制变量

标签 javascript angularjs directive

我做了一个自定义指令, 在模板中有一个变量 ng-model="test",

在指令 Controller 中, 我怎样才能对变量进行任何更改?

angular.module("myDirective", []).directive("ngTest", function(){
    return {
      restrict: "E",
      scope: true,
      template: "<input type='text' ng-model='test'>+
      <button ng-click='change()'></button>",
      controller: function ($scope, $element){
        $scope.change = function(){
          // no idea about how to control variable test here.
          $scope.test = "123123123"; //this doesn't work. :(
        }
      } 
    }
  });

最佳答案

这里正在工作 plunker为你:)

app.directive("ngTest", function(){
    return {
      restrict: "E",
      scope: true,
      template: "<input type='text' ng-model='test'><button ng-click='change()'>Click Me</button>",
      controller: function ($scope, $element){
        $scope.change = function(){
          // no idea about how to control variable test here.
          $scope.test = "123123123"; //this doesn't work. :(
        }
      } 
    }
  });

我发现的问题是指令中的“+”不起作用,您需要在同一行中提供完整的模板,否则使用 tempalteUrl 为其提供值。

关于javascript - 自定义指令模板中的 AngularJS 控制变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29387522/

相关文章:

javascript - 通过 jquery 或 javascript 显示隐藏的 asp.net 控件

javascript - 编码uri组件,不自动解码

javascript - Angular 只加载第一个指令

JavaScript 打断文本框

javascript - 如何在reactjs中过滤组件/元素数组

javascript - 使用来自 JavaScript 函数的结果打开新标签

angularjs - 继承 AngularJS 指令以创建可重用组件

angularjs - 在html5模式下使用ng-route重新加载 Angular 页面不会返回index.html

jquery - 如何在 BootstrapDialog.show({ }) 弹出窗口中传递参数

angularjs - 在指令实例之间进行通信的最佳方式