从指令内更改属性

2023-11-23

使用 AngularJS。我有一个指令,我想要有两种方式的数据绑定。该指令将有一个名为“activate”的属性。最初,“activate”的值为“1”。

该指令的链接函数将检查“activate”是否等于“1”。如果是这样,它会将“activate”更改为 0,但会执行一些其他操作。

稍后,如果我希望指令再次执行某些操作,在控制器中,我将再次将“activate”更改为“1”。由于指令有手表,因此会重复该循环。

不幸的是,每次我这样做时,我都会得到“与指令‘testDirective’一起使用的表达式‘0’是不可分配的!”或“不可分配的模型表达式:1(指令:testDirective)”。

这是 HTML:

<body ng-app="app">
    <test-directive activate="1"></test-directive>    
</body>

这是JS:

var app = angular.module('app', []);


app.directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            activate : '='
        },


        link: function( scope, elem, attrs, controller ) {
            var el = elem[0];

            var updateContent = function() {
                el.innerText = 'Activate=' + scope.activate;
            };

            updateContent();
            attrs.$observe( 'activate', function() {
                console.log('Activate=' + scope.activate);
                if( scope.activate == '1') {
                    scope.activate = '0'
                    updateContent();
                }
            });
        }
    }
});      

这是 jsFiddle 上的:http://jsfiddle.net/justbn/mgSpY/3/

为什么我无法更改存储在指令属性中的值?我正在使用2路绑定。

文档说“如果父范围属性不存在,它将抛出 NON_ASSIGNABLE_MODEL_EXPRESSION 异常。”

注意:更新内容正确显示“activate”的值。但是,“”中“activate”的值不会更新。

然而,这对我来说毫无意义,因为父范围属性确实存在。

有任何想法吗?


虽然我同意使用$watch代替attrs.$observe这不是您收到错误消息的主要原因。

问题是您正在尝试为不可分配的表达式分配一个值 - 正如错误消息告诉您的那样:Non-assignable model expression: 1 (directive: testDirective)

本例中不可赋值的表达式是数字“1”

<test-directive activate="1">

您设法将初始值 (1) 传递给指令,但是当指令尝试更新该值时,属性activate无法更改 - 因为它是一个数字。

因此,您需要做的是将其更改为变量,以便稍后更新该值。

请参阅下面的代码,其中我通过控制器在 $scope 中初始化了一个名为 activate.initialValue 的变量。

而且我也用过$watch代替attrs.$observe.

我已经添加了$timeout只是为了模拟 2 秒后更改激活值的事件。

HTML

<body ng-app="app" ng-controller="appCtrl">
    <test-directive activate="activate.initialValue"></test-directive>    
</body>

JS

var app = angular.module('app', []);

app.controller('appCtrl', function($scope){
    $scope.activate = {
        initialValue : 1
    }
});

var app = angular.module('app', []);

app.controller('appCtrl', function($scope){
    $scope.activate = {
        initialValue : 2
    }
});

app.directive('testDirective', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            activate : '='
        },      
        link: function(scope, elem, attrs) {
            scope.$watch('activate', function(newValue, oldValue){
               console.log('activate has changed', newValue);
            });

             $timeout(function(){ 
                    scope.activate = 0;     
                }, 2000);
        },
        template: "{{activate}}"
    }
});   

您还可以在这里查看工作(http://jsfiddle.net/mgSpY/63/).

这是关于它的 AngularJS 官方文档(http://docs.angularjs.org/error/ngModel:nonassign)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从指令内更改属性 的相关文章

  • Chrome开发者工具中不显示cookie

    i am using node express server and angularjs as frontend server sets the cookie and is shown correctly in the network re
  • 如何使用 AngularJS 设置页面标题[重复]

    这个问题在这里已经有答案了 我使用以下代码来显示每个 AngularJS 应用程序模板的页面标题 但每当我尝试输入无效的 URL 来测试 otherwise 时 我都会收到以下错误 TypeError Cannot read propert
  • 当引导模式打开时如何防止正文内容滚动

    我正在使用 Angular UI Bootstrap模态框 http angular ui github io bootstrap modal 当模式打开时 主体有一个滚动条 当我滚动时 模式后面的内容也会滚动 我可以将溢出 隐藏到正文标记
  • TransformResponse 标头参数 ($resource) 中缺少自定义响应的标头

    我定义了一个 resource到一个 API 端点 该端点返回包含多个内容的响应headers但在transformResponse https docs angularjs org api ngResource service 24res
  • AngularJS ngRepeat:如何区分偶数/奇数元素?

    我是角度新手 并尝试执行以下操作 tr div td class even a href element a td div div td class odd a href element a td div tr 对于上面的代码 两者ng i
  • 使用 AngularJS“copy()”避免引用问题

    我正在显示一个项目列表 每个项目旁边都有一个 编辑 按钮 单击可打开 Angular ui 模式窗口 用户可以更改特定项目的某些属性 现在 让我烦恼的是 当在此编辑窗口中输入内容时 项目列表中的特定项目立即反映了更改 我只希望它在用户单击模
  • $routeProvider - 为所有路由注入相同的依赖项

    以下代码 routeProvider when page1 控制器 MyController 解析 策略 StrategyOne 在实例化控制器 MyController 之前等待策略依赖关系得到解决 在我的应用程序中 我有一个返回承诺的函
  • AngularJS 控制器内的函数

    我有一个代码片段 其中有一个 Angular 模块化控制器 但同一控制器内有一个函数并带有一个调用 这让我怀疑 Javascript 或 Angular 是否允许这种编码方式 如果是 那么它如何读取它 请参阅我的以下代码格式 obj con
  • 使用 angularjs 进行动态 url 路由

    我的代码中有类似的东西 ul p b item name b p 例如 我有 3 件商品 宝马 高尔夫和梅赛德斯 我想要一个包含每个项目名称的 url 例如 bmw 或 mercedes 并且所有 url 使用details html 来显
  • 角度2:语法错误:意外的标记<(...)

    我知道 这个问题已经被问过 但我找不到适合我的特定情况的解决方案 我无法理解错误的真正原因 我有一个运行良好的 angularjs2 应用程序 现在我想导入marked图书馆 我做了什么 npm install marked tsd ins
  • 角度不安全 url

    我使用此指令将 jCrop 与 Angular 结合使用 http plnkr co edit Z2IQX8s9UK6wQ1hS4asz p preview http plnkr co edit Z2IQX8s9UK6wQ1hS4asz p
  • AngularJS - 成功返回 $http.post

    我使用 AngularJs 我需要在 http post 连接后返回数据 这是代码 app controller PrincipalController http scope function http scope scope myData
  • 从 Rest API 响应内容处置输出中下载 javascript 中的 excel 文件 [对象,对象]

    我想从我的 angularJs 代码下载一个 excel 文件 我向 Java Rest API 发出 http post 请求并返回带有标头的文件 Content Disposition 附件 文件名 new excel file xls
  • 使用像 angularjs 这样的框架对可访问性有什么影响?

    我们的立场 我们正在推动网络可访问性 以便遵守管理公共 教育机构的某些法律 到目前为止 我们一直在确保 我们的布局是按逻辑顺序排列的 图像有alt 标签 但很快我们就意识到我们需要行动起来并认真思考这个问题 我们正在考虑什么 我们一直在关注
  • Angularjs UI 模态表单

    我曾经使用引导模式有一个登录对话框 scope loginDialog backdrop true keyboard true windowClass modal loginDialog backdropClick true templat
  • AngularJs:显示来自 git 或 Bower 的版本号

    我创建了一个 Angular 应用程序 我想在屏幕上显示应用程序的当前版本号 目前我已将其实现为常量 application constant constants VERSION 1 1 2 但这需要我在每个新版本上更新常量 我使用 Bow
  • 如何测试 AngularJS 指令

    我正在开发一个将使用 AngularJS 的 Rails 3 2 应用程序 我可以让 Angular 做我需要的事情 但我很难弄清楚如何测试我正在做的事情 我正在使用guard jasmine 使用 PhantomJS 运行 Jasmine
  • 识别 ASP.NET MVC 代码中的 Angular js AJAX 调用

    我正在使用 ASP NET MVC 和 AngularJS 开发一个示例应用程序 在服务器端代码中 我编写了一个Action过滤器属性 其中我需要检查请求是普通请求 浏览器 还是AJAX请求 public override void OnA
  • 更改 Angular 模型以更新 Kendo

    我一直在一个项目中使用 Angular 最近才发现 Kendo Angular 项目位于http kendo labs github io angular kendo http kendo labs github io angular ke
  • 为什么使用 Angular 的 $log 而不是 console.log?

    我知道这是使用角度的最佳实践 log代替console log 但是 我找不到解释原因的良好文档 开发人员为什么要使用 log log首先检查浏览器是否支持console log 例如 IE 8 就没有 这可以防止在 IE 8 上显示错误

随机推荐

  • 查找上一页 URL

    我正在尝试查找上一页的 url 例如 用户使用以下命令从页面 A 导航到页面 BServer Redirect B aspx 页面B可以显示引用它的url 我尝试过使用 Response Write Page PreviousPage To
  • Python pandas 将行转换为存在多列的列[重复]

    这个问题在这里已经有答案了 我有一个包含多列的 DF 我想将其从行转换为列 我在堆栈溢出中看到的大多数解决方案仅处理 2 列 From DF PO ID PO Name Region Date Price 1 AA North 07 201
  • 一个线程中对非易失性成员变量的赋值是否保证在另一个线程中可见?

    考虑下面的 Java 示例 请注意 两个类成员变量都没有声明为volatile 如果我正确理解内存模型和 发生在 规则之前 Java 实现可以优化run 方法 使其永远运行 即使另一个线程调用该方法stopNow 方法 发生这种情况是因为里
  • 从数据库代码中删除样板

    看来每次我要执行数据库查询时 我都必须编写以下内容 Connection conn null Statement stmt null ResultSet rset null try conn dataSource getConnection
  • 适当的布尔随机生成器(伯努利分布)

    我很想知道是否有默认的随机布尔生成器randomC 11 库 我一直在使用 int 生成器返回0 or 1然后转换为 bool 但我正在尝试优化我的代码 并认为我可以通过从一开始就使用 bool 生成器 如果存在 来节省成本 See std
  • 砍掉每个变量名称的第一个字母[重复]

    这个问题在这里已经有答案了 我有一些数据看起来像这样 country agdp apop 1 US 100 100 2 Australia 50 50 变量名称是agdp and apop 但我希望他们是gdp and pop 我的真实数据
  • Bootstrap-vue b-table 标头中带有过滤器

    我有一个使用 bootstrap vue 生成的表 显示系统搜索的结果 结果表向用户显示记录 用户可以对它们进行排序和过滤 如何在表格标题下方添加搜索字段 th 使用 bootstrap vue 生成 th
  • 为什么我无法使用 Xamarin 在可移植类库中引用 System.Net.Sockets?

    我正在尝试在可移植类库中使用 System Net Sockets API 以便我的项目可以重用套接字连接代码 但我无法在代码中引用该名称空间 据我了解 PCL 限制您只能使用所有目标平台上可用的程序集 但我的目标是 ios Android
  • C# 与 SharpZipLib - SharpZipLib 与 Winzip 和 XP 的兼容性吗?

    我正在使用SharpZipLib自动压缩某些文件的库 问题是生成的 zip 文件不适用于 Winzip 版本 8 1 或 XP 的压缩文件夹 它确实可以与 7zip 一起使用 Winzip 给出一个错误该文件不是标准 Zip 2 0 格式
  • TabIndex 无法正常工作

    I have a windows form application On the form there are three groupboxs Each groupbox contains some controls Please see
  • 如何在模板绑定中从 Angular 4 访问 getter/setter 访问器?

    假设我有以下 getter setter 方法 get next console log this people this index this index return this people this index set next i
  • 使用 jQuery .filter() 选择 div 中的特定文本

    HTML p class greeting hello my name is kevin what s yours p jQuery p greeting filter function return this text my name i
  • JPA 不生成“删除时设置为空”FK 限制

    我有两个相关的 JPA 注释类 警报和状态 一个警报可以有一个状态 我需要的是能够删除一个状态并将空值 传播 到已删除的该状态中的警报 也就是说 我需要将外键定义为 删除时设置为空 Entity public class Alarm Id
  • PHP 速度与其他语言的比较

    我经常听说 PHP 与其他语言相比速度很慢 速度差异是否足够明显以至于我应该切换到另一种语言 如果是这样 您会推荐什么其他语言 或者有什么好的优化可以加快 PHP 的速度 这个问题经常出现 答案是 是的 它比 C Java C C 等慢 不
  • 具有 memory_order_relaxed 的存储是否有可能永远不会到达其他线程?

    假设我有一个线程A写入一个atomic int x 0 using x store 1 std memory order relaxed 如果没有任何其他同步方法 其他线程需要多长时间才能看到这一点 使用x load std memory
  • costura.fody 用于引用另一个 dll 的 dll

    我有一个我写的小exe 它使用LibGit2Sharp我正在尝试使用Costura Fody嵌入所有内容 这样我只有一个可执行文件可以分发 实际上 还有两个配置文件 但这没关系 问题似乎是这样的LibGet2Sharp dll有相当坚定的参
  • C# 如何初始化WebService

    是否有可能初始化 WebService 我正在寻找一种仅在第一次调用 WebService 期间运行的方法 Net 中有类似的东西吗 如果您在给定客户端第一次连接到 Web 服务时需要 初始化 Have an Initialise返回令牌
  • 路径助手生成带有点而不是斜线的路径

    在我的 paths rb 中 我有以下内容 resources message threads 当我打电话时 message threads path 1 I get message threads 1 为什么是这样 我的其他资源运行良好
  • 给定成对距离且簇数未知的聚类?

    我有一组对象 obj1 obj2 obj3 objn 我已经计算了所有可能对的成对距离 距离存储在n n matrix M with Mij之间的距离obji and objj 那么自然就可以看到M是一个对称矩阵 现在我希望对这些对象执行无
  • 从指令内更改属性

    使用 AngularJS 我有一个指令 我想要有两种方式的数据绑定 该指令将有一个名为 activate 的属性 最初 activate 的值为 1 该指令的链接函数将检查 activate 是否等于 1 如果是这样 它会将 activat