Question

我希望在表单中包含动态操作属性。我有一个代码

 <form ng-action="/users/{{user.id}}">
 </form>

Angular会将{{user.id}}替换为实际值，但不会使用新值添加action属性。我该如何解决这个问题？

我也试过

<form action="/users/{{user.id}}"></form>

它适用于Angular 1.2.1，但不适用于更高版本(>1.2.1)

JSFiddle with angular version 1.2.1，http://jsfiddle.net/fizerkhan/s8uCT/5/
JSFiddle with angular version 1.2.2，http://jsfiddle.net/fizerkhan/s8uCT/6/

我也尝试使用角度版1.2.4，1.2.6，但它不起作用。

Answer 1

在Angular中没有名为ng-action的指令

<强> refer Angular DOCS

<form action="{{'/users/' + user.id }}">

您需要添加以上标记才能正常工作

Answer 2

对于Angular 1.2+，您需要信任带有SCE的URL。

在控制器中，添加$sce的依赖项。然后，将URL定义如下

$scope.formUrl = $sce.trustAsResourceUrl('/users/' + user.id);

然后在视图中

<form action="{{formUrl}}" method="POST">

Answer 3

从版本1.2开始，Angular默认启用了Strict Contextual Escaping（SCE）。

请参阅https://docs.angularjs.org/api/ng/service/ $ sce

Answer 4

您可以使用jQuery更改action属性，如下例所示：

browserify files/*.js \
    -p [ ../ -o 'uglifyjs -cm | tee bundle/`basename $FILE` | gzip > bundle/`basename $FILE`.gz' ] \
    | uglifyjs -cm | tee bundle/common.js | gzip > bundle/common.js.gz

Answer 5

以下是我使用Angular指令的解决方案：

JS：

juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Cluster created with settings {hosts=[127.0.0.1:27017], mode=SINGLE, requiredClusterType=UNKNOWN, serverSelectionTimeout='30000 ms', maxWaitQueueSize=500}
juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Cluster created with settings {hosts=[localhost:27017], mode=SINGLE, requiredClusterType=UNKNOWN, serverSelectionTimeout='30000 ms', maxWaitQueueSize=50}
juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Opened connection [connectionId{localValue:1, serverValue:51}] to 127.0.0.1:27017
juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Opened connection [connectionId{localValue:2, serverValue:52}] to localhost:27017
juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Monitor thread successfully connected to server with description ServerDescription{address=127.0.0.1:27017, type=STANDALONE, state=CONNECTED, ok=true, version=ServerVersion{versionList=[3, 2, 6]}, minWireVersion=0, maxWireVersion=4, maxDocumentSize=16777216, roundTripTimeNanos=424584}
juin 08, 2016 10:09:58 AM com.mongodb.diagnostics.logging.JULLogger log
INFOS: Monitor thread successfully connected to server with description ServerDescription{address=localhost:27017, type=STANDALONE, state=CONNECTED, ok=true, version=ServerVersion{versionList=[3, 2, 6]}, minWireVersion=0, maxWireVersion=4, maxDocumentSize=16777216, roundTripTimeNanos=389829}

HTML：

app.controller('formCtrl', ['$scope', function($scope) {
    $scope.customAction = 'http://stackoverflow.com/';
}])
.directive('dynamicFormAction', function() {
    return {
        restrict: 'A',
        scope: {
            'dynamicFormAction': '='
        },
        link: function(scope, el, attrs) {
            scope.$watch('dynamicFormAction', function (action) {
                el[0].action = action;
            });
        }
    };
});

ng-action不在表单中添加action属性

5 个答案: